xBDD.Reporting.Test 2015-10-07T21:50:01

Areas

Features

Scenarios

Steps

217

201

ViewHtmlReport

Features

Scenarios

Steps

Write To Html

Scenarios

Steps

Get String
1. When the code calls 'xBDD.CurrentRun.WriteToHTML()
2. Then the code should return a string value of the html report

ViewHtmlReport CollapsingAndExpanding

Features

Scenarios

Steps

Collapse And Expand Area Description

Scenarios

Steps

Collapse [Skipped - Not Started]
Collapse All [Skipped - Not Started]
Default Collapsed When More Than5 [Skipped - Not Started]
Expand [Skipped - Not Started]
Expand All [Skipped - Not Started]

Collapse And Expand Areas

Scenarios

Steps

Collapse
1. Given the test results of a single skipped scenario
2. And the user views the html report [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-warning">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-warning" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 11</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #917545;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-1"> <h3 class="text-warning" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-1"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1 [Skipped - Not Started]</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step skipped text-warning" id="step-2"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
3. And the user expands the first area [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-warning">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-warning" data-toggle="collapse" href="#area-1-features" aria-expanded="true" aria-controls="area-1-features">My Area 11</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left-width: 2px; border-left-style: solid; border-left-color: rgb(145, 117, 69);" id="area-1-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-1"> <h3 class="text-warning" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-1"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1 [Skipped - Not Started]</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step skipped text-warning" id="step-2"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
4. When the user cliks the first area again
5. Then the report should collapse the features listed under the area [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-warning">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-warning collapsed" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 11</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left-width: 2px; border-left-style: solid; border-left-color: rgb(145, 117, 69); height: 14px;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-1"> <h3 class="text-warning" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-1"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1 [Skipped - Not Started]</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step skipped text-warning" id="step-2"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
Collapse All [Skipped - Not Started]
Expand
1. Given the test results of a single skipped scenario
2. And the user views the html report [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-warning">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-warning" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 11</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #917545;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-1"> <h3 class="text-warning" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-1"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1 [Skipped - Not Started]</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step skipped text-warning" id="step-2"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
3. When the user clicks the first area
4. Then the report should expand the features listed under the area [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-warning">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-warning" data-toggle="collapse" href="#area-1-features" aria-expanded="true" aria-controls="area-1-features">My Area 11</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left-width: 2px; border-left-style: solid; border-left-color: rgb(145, 117, 69);" id="area-1-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-1"> <h3 class="text-warning" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-1"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1 [Skipped - Not Started]</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step skipped text-warning" id="step-2"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
Expand All
1. Given the test results of a passing full test run
2. And the user views the html report [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-success">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">4</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">8</td> <td class="passed success text-center">8</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">24</td> <td class="passed success text-center">24</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 1</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">4</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">12</td> <td class="passed success text-center">12</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">6</td> <td class="passed success text-center">6</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-2"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-2-steps" aria-expanded="false" aria-controls="scenario-2-steps">My Scenario 2</div> <div class="panel-body collapse" id="scenario-2-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-4"> <h5>Given my step 4</h5> </li> <li class="step passed text-success" id="step-5"> <h5>When my step 5</h5> </li> <li class="step passed text-success" id="step-6"> <h5>Then my step 6</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-2"> <h3 class="text-success" data-toggle="collapse" href="#feature-2-scenarios" aria-expanded="false" aria-controls="feature-2-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">6</td> <td class="passed success text-center">6</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-2-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-3"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-3-steps" aria-expanded="false" aria-controls="scenario-3-steps">My Scenario 3</div> <div class="panel-body collapse" id="scenario-3-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-7"> <h5>Given my step 7</h5> </li> <li class="step passed text-success" id="step-8"> <h5>When my step 8</h5> </li> <li class="step passed text-success" id="step-9"> <h5>Then my step 9</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-4"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-4-steps" aria-expanded="false" aria-controls="scenario-4-steps">My Scenario 4</div> <div class="panel-body collapse" id="scenario-4-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-10"> <h5>Given my step 10</h5> </li> <li class="step passed text-success" id="step-11"> <h5>When my step 11</h5> </li> <li class="step passed text-success" id="step-12"> <h5>Then my step 12</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-2"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-2-features" aria-expanded="false" aria-controls="area-2-features">My Area 2</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-2-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">4</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">12</td> <td class="passed success text-center">12</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-2-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-3"> <h3 class="text-success" data-toggle="collapse" href="#feature-3-scenarios" aria-expanded="false" aria-controls="feature-3-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">6</td> <td class="passed success text-center">6</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-3-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-5"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-5-steps" aria-expanded="false" aria-controls="scenario-5-steps">My Scenario 5</div> <div class="panel-body collapse" id="scenario-5-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-13"> <h5>Given my step 13</h5> </li> <li class="step passed text-success" id="step-14"> <h5>When my step 14</h5> </li> <li class="step passed text-success" id="step-15"> <h5>Then my step 15</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-6"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-6-steps" aria-expanded="false" aria-controls="scenario-6-steps">My Scenario 6</div> <div class="panel-body collapse" id="scenario-6-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-16"> <h5>Given my step 16</h5> </li> <li class="step passed text-success" id="step-17"> <h5>When my step 17</h5> </li> <li class="step passed text-success" id="step-18"> <h5>Then my step 18</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-4"> <h3 class="text-success" data-toggle="collapse" href="#feature-4-scenarios" aria-expanded="false" aria-controls="feature-4-scenarios">My Feature 4</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">6</td> <td class="passed success text-center">6</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-4-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-7"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-7-steps" aria-expanded="false" aria-controls="scenario-7-steps">My Scenario 7</div> <div class="panel-body collapse" id="scenario-7-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-19"> <h5>Given my step 19</h5> </li> <li class="step passed text-success" id="step-20"> <h5>When my step 20</h5> </li> <li class="step passed text-success" id="step-21"> <h5>Then my step 21</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-8"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-8-steps" aria-expanded="false" aria-controls="scenario-8-steps">My Scenario 8</div> <div class="panel-body collapse" id="scenario-8-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-22"> <h5>Given my step 22</h5> </li> <li class="step passed text-success" id="step-23"> <h5>When my step 23</h5> </li> <li class="step passed text-success" id="step-24"> <h5>Then my step 24</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
3. When the user clicks the expand all areas menu option
4. Then the report should expand the features listed under the area [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="true"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse in" id="menu-body" aria-expanded="true" style=""> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-success">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">4</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">8</td> <td class="passed success text-center">8</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">24</td> <td class="passed success text-center">24</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success" data-toggle="collapse" href="#area-1-features" aria-expanded="true" aria-controls="area-1-features">My Area 1</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">4</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">12</td> <td class="passed success text-center">12</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left-width: 2px; border-left-style: solid; border-left-color: rgb(90, 139, 91);" id="area-1-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">6</td> <td class="passed success text-center">6</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-2"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-2-steps" aria-expanded="false" aria-controls="scenario-2-steps">My Scenario 2</div> <div class="panel-body collapse" id="scenario-2-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-4"> <h5>Given my step 4</h5> </li> <li class="step passed text-success" id="step-5"> <h5>When my step 5</h5> </li> <li class="step passed text-success" id="step-6"> <h5>Then my step 6</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-2"> <h3 class="text-success" data-toggle="collapse" href="#feature-2-scenarios" aria-expanded="false" aria-controls="feature-2-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">6</td> <td class="passed success text-center">6</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-2-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-3"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-3-steps" aria-expanded="false" aria-controls="scenario-3-steps">My Scenario 3</div> <div class="panel-body collapse" id="scenario-3-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-7"> <h5>Given my step 7</h5> </li> <li class="step passed text-success" id="step-8"> <h5>When my step 8</h5> </li> <li class="step passed text-success" id="step-9"> <h5>Then my step 9</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-4"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-4-steps" aria-expanded="false" aria-controls="scenario-4-steps">My Scenario 4</div> <div class="panel-body collapse" id="scenario-4-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-10"> <h5>Given my step 10</h5> </li> <li class="step passed text-success" id="step-11"> <h5>When my step 11</h5> </li> <li class="step passed text-success" id="step-12"> <h5>Then my step 12</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-2"> <h2 class="text-success" data-toggle="collapse" href="#area-2-features" aria-expanded="true" aria-controls="area-2-features">My Area 2</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-2-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">4</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">12</td> <td class="passed success text-center">12</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left-width: 2px; border-left-style: solid; border-left-color: rgb(90, 139, 91);" id="area-2-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-3"> <h3 class="text-success" data-toggle="collapse" href="#feature-3-scenarios" aria-expanded="false" aria-controls="feature-3-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">6</td> <td class="passed success text-center">6</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-3-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-5"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-5-steps" aria-expanded="false" aria-controls="scenario-5-steps">My Scenario 5</div> <div class="panel-body collapse" id="scenario-5-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-13"> <h5>Given my step 13</h5> </li> <li class="step passed text-success" id="step-14"> <h5>When my step 14</h5> </li> <li class="step passed text-success" id="step-15"> <h5>Then my step 15</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-6"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-6-steps" aria-expanded="false" aria-controls="scenario-6-steps">My Scenario 6</div> <div class="panel-body collapse" id="scenario-6-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-16"> <h5>Given my step 16</h5> </li> <li class="step passed text-success" id="step-17"> <h5>When my step 17</h5> </li> <li class="step passed text-success" id="step-18"> <h5>Then my step 18</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-4"> <h3 class="text-success" data-toggle="collapse" href="#feature-4-scenarios" aria-expanded="false" aria-controls="feature-4-scenarios">My Feature 4</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">6</td> <td class="passed success text-center">6</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-4-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-7"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-7-steps" aria-expanded="false" aria-controls="scenario-7-steps">My Scenario 7</div> <div class="panel-body collapse" id="scenario-7-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-19"> <h5>Given my step 19</h5> </li> <li class="step passed text-success" id="step-20"> <h5>When my step 20</h5> </li> <li class="step passed text-success" id="step-21"> <h5>Then my step 21</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-8"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-8-steps" aria-expanded="false" aria-controls="scenario-8-steps">My Scenario 8</div> <div class="panel-body collapse" id="scenario-8-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-22"> <h5>Given my step 22</h5> </li> <li class="step passed text-success" id="step-23"> <h5>When my step 23</h5> </li> <li class="step passed text-success" id="step-24"> <h5>Then my step 24</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>

Collapse And Expand Exception

Scenarios

Steps

Collapse [Skipped - Not Started]
Collapse All [Skipped - Not Started]
Default Collapsed When More Than5 [Skipped - Not Started]
Expand [Skipped - Not Started]
Expand All [Skipped - Not Started]

Collapse And Expand Output

Scenarios

Steps

Collapse [Skipped - Not Started]
Collapse All [Skipped - Not Started]
Default Collapsed When More Than5 [Skipped - Not Started]
Expand [Skipped - Not Started]
Expand All [Skipped - Not Started]

ViewHtmlReport ViewResults

Features

Scenarios

Steps

146

View Area

Scenarios

Steps

Failing [Skipped - Not Started]
Mulitple [Skipped - Not Started]
Passing [Skipped - Not Started]
Single
1. Given the test results of a single passing scenario
2. When the user views the html report [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-success">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 11</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
3. Then the report will show the area name in green to indicate all features passed
4. And the features under the area will be collapsed because it passed
Skipped [Skipped - Not Started]

View Area Stats

Scenarios

Steps

All Failed [Skipped - Not Started]
All Passing [Skipped - Not Started]
All Skipped [Skipped - Not Started]
Failed Skipped And Passing Feature Stats
1. Given the test results of a full test run with all outcomes
2. When the user views the html report [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-danger">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">27</td> <td class="passed success text-center">19</td> <td class="skipped warning text-center">7</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 70.3703703703704%"></td> <td class="skipped-bar bg-warning" style="width: 25.9259259259259%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">81</td> <td class="passed success text-center">58</td> <td class="skipped warning text-center">22</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 71.6049382716049%"></td> <td class="skipped-bar bg-warning" style="width: 27.1604938271605%"></td> <td class="failed-bar bg-danger" style="width: 1.23456790123457%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 1</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">27</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-2"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-2-steps" aria-expanded="false" aria-controls="scenario-2-steps">My Scenario 2</div> <div class="panel-body collapse" id="scenario-2-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-4"> <h5>Given my step 4</h5> </li> <li class="step passed text-success" id="step-5"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-6"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-3"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-3-steps" aria-expanded="false" aria-controls="scenario-3-steps">My Scenario 3</div> <div class="panel-body collapse" id="scenario-3-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-7"> <h5>Given my step 7</h5> </li> <li class="step passed text-success" id="step-8"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-9"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-2"> <h3 class="text-success" data-toggle="collapse" href="#feature-2-scenarios" aria-expanded="false" aria-controls="feature-2-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-2-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-4"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-4-steps" aria-expanded="false" aria-controls="scenario-4-steps">My Scenario 4</div> <div class="panel-body collapse" id="scenario-4-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-10"> <h5>Given my step 10</h5> </li> <li class="step passed text-success" id="step-11"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-12"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-5"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-5-steps" aria-expanded="false" aria-controls="scenario-5-steps">My Scenario 5</div> <div class="panel-body collapse" id="scenario-5-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-13"> <h5>Given my step 13</h5> </li> <li class="step passed text-success" id="step-14"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-15"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-6"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-6-steps" aria-expanded="false" aria-controls="scenario-6-steps">My Scenario 6</div> <div class="panel-body collapse" id="scenario-6-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-16"> <h5>Given my step 16</h5> </li> <li class="step passed text-success" id="step-17"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-18"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-3"> <h3 class="text-success" data-toggle="collapse" href="#feature-3-scenarios" aria-expanded="false" aria-controls="feature-3-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-3-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-7"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-7-steps" aria-expanded="false" aria-controls="scenario-7-steps">My Scenario 7</div> <div class="panel-body collapse" id="scenario-7-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-19"> <h5>Given my step 19</h5> </li> <li class="step passed text-success" id="step-20"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-21"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-8"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-8-steps" aria-expanded="false" aria-controls="scenario-8-steps">My Scenario 8</div> <div class="panel-body collapse" id="scenario-8-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-22"> <h5>Given my step 22</h5> </li> <li class="step passed text-success" id="step-23"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-24"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-9"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-9-steps" aria-expanded="false" aria-controls="scenario-9-steps">My Scenario 9</div> <div class="panel-body collapse" id="scenario-9-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-25"> <h5>Given my step 25</h5> </li> <li class="step passed text-success" id="step-26"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-27"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-2"> <h2 class="text-warning" data-toggle="collapse" href="#area-2-features" aria-expanded="false" aria-controls="area-2-features">My Area 2</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-2-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">15</td> <td class="skipped warning text-center">12</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #917545;" id="area-2-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-4"> <h3 class="text-warning" data-toggle="collapse" href="#feature-4-scenarios" aria-expanded="false" aria-controls="feature-4-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-4-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-10"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-10-steps" aria-expanded="false" aria-controls="scenario-10-steps">My Scenario 10 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-10-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-28"> <h5>Given my step 28</h5> </li> <li class="step skipped text-warning" id="step-29"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-30"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-11"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-11-steps" aria-expanded="false" aria-controls="scenario-11-steps">My Scenario 11 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-11-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-31"> <h5>Given my step 31</h5> </li> <li class="step skipped text-warning" id="step-32"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-33"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-12"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-12-steps" aria-expanded="false" aria-controls="scenario-12-steps">My Scenario 12</div> <div class="panel-body collapse" id="scenario-12-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-34"> <h5>Given my step 34</h5> </li> <li class="step passed text-success" id="step-35"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-36"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-5"> <h3 class="text-warning" data-toggle="collapse" href="#feature-5-scenarios" aria-expanded="false" aria-controls="feature-5-scenarios">My Feature 4</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-5-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-13"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-13-steps" aria-expanded="false" aria-controls="scenario-13-steps">My Scenario 13 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-13-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-37"> <h5>Given my step 37</h5> </li> <li class="step skipped text-warning" id="step-38"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-39"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-14"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-14-steps" aria-expanded="false" aria-controls="scenario-14-steps">My Scenario 14 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-14-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-40"> <h5>Given my step 40</h5> </li> <li class="step skipped text-warning" id="step-41"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-42"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-15"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-15-steps" aria-expanded="false" aria-controls="scenario-15-steps">My Scenario 15</div> <div class="panel-body collapse" id="scenario-15-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-43"> <h5>Given my step 43</h5> </li> <li class="step passed text-success" id="step-44"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-45"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-6"> <h3 class="text-success" data-toggle="collapse" href="#feature-6-scenarios" aria-expanded="false" aria-controls="feature-6-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-6-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-16"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-16-steps" aria-expanded="false" aria-controls="scenario-16-steps">My Scenario 16</div> <div class="panel-body collapse" id="scenario-16-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-46"> <h5>Given my step 46</h5> </li> <li class="step passed text-success" id="step-47"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-48"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-17"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-17-steps" aria-expanded="false" aria-controls="scenario-17-steps">My Scenario 17</div> <div class="panel-body collapse" id="scenario-17-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-49"> <h5>Given my step 49</h5> </li> <li class="step passed text-success" id="step-50"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-51"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-18"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-18-steps" aria-expanded="false" aria-controls="scenario-18-steps">My Scenario 18</div> <div class="panel-body collapse" id="scenario-18-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-52"> <h5>Given my step 52</h5> </li> <li class="step passed text-success" id="step-53"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-54"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-3"> <h2 class="text-danger" data-toggle="collapse" href="#area-3-features" aria-expanded="true" aria-controls="area-3-features">My Area 3</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-3-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">16</td> <td class="skipped warning text-center">10</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 59.2592592592593%"></td> <td class="skipped-bar bg-warning" style="width: 37.037037037037%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left: 2px solid #AD4D4B;" id="area-3-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #AD4D4B;" id="feature-7"> <h3 class="text-danger" data-toggle="collapse" href="#feature-7-scenarios" aria-expanded="true" aria-controls="feature-7-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 44.4444444444444%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse in" id="feature-7-scenarios" aria-expanded="true"> <li class="scenario failed" id="scenario-19"> <div class="panel panel-danger"> <div class="panel-heading" data-toggle="collapse" href="#scenario-19-steps" aria-expanded="true" aria-controls="scenario-19-steps">My Scenario 19 [Failed]</div> <div class="panel-body collapse in" id="scenario-19-steps" aria-expanded="true"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-55"> <h5>Given my step 55</h5> </li> <li class="step failed text-danger" id="step-56"> <h5>When my failed step 56 [Failed]</h5> <dl class="exception dl-horizontal"> <dt>Error Type</dt> <dd class="error-type">Exception</dd> <dt>Message</dt> <dd class="error-message"><pre>My Error</pre></dd> <dt>Stack</dt> <dd class="error-stack"><pre> at xBDD.Reporting.Test.Steps.HtmlReport.<>c.<OfAFullTestRunWithAllOutcomes>b__2_2(Step s2) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\test\xBDD.Reporting.Test\Steps\HtmlReport.cs:line 123 at xBDD.Core.StepExecutor.ExecuteStep(Step step) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\src\xBDD.Core\Core\StepExecutor.cs:line 44</pre></dd> </dl> </li> <li class="step skipped text-warning" id="step-57"> <h5>Then my step 3 [Skipped - Previous Error]</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-20"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-20-steps" aria-expanded="false" aria-controls="scenario-20-steps">My Scenario 20 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-20-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-58"> <h5>Given my step 58</h5> </li> <li class="step skipped text-warning" id="step-59"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-60"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-21"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-21-steps" aria-expanded="false" aria-controls="scenario-21-steps">My Scenario 21</div> <div class="panel-body collapse" id="scenario-21-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-61"> <h5>Given my step 61</h5> </li> <li class="step passed text-success" id="step-62"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-63"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-8"> <h3 class="text-warning" data-toggle="collapse" href="#feature-8-scenarios" aria-expanded="false" aria-controls="feature-8-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-8-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-22"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-22-steps" aria-expanded="false" aria-controls="scenario-22-steps">My Scenario 22 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-22-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-64"> <h5>Given my step 64</h5> </li> <li class="step skipped text-warning" id="step-65"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-66"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-23"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-23-steps" aria-expanded="false" aria-controls="scenario-23-steps">My Scenario 23 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-23-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-67"> <h5>Given my step 67</h5> </li> <li class="step skipped text-warning" id="step-68"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-69"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-24"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-24-steps" aria-expanded="false" aria-controls="scenario-24-steps">My Scenario 24</div> <div class="panel-body collapse" id="scenario-24-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-70"> <h5>Given my step 70</h5> </li> <li class="step passed text-success" id="step-71"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-72"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-9"> <h3 class="text-success" data-toggle="collapse" href="#feature-9-scenarios" aria-expanded="false" aria-controls="feature-9-scenarios">My Feature 9</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-9-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-25"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-25-steps" aria-expanded="false" aria-controls="scenario-25-steps">My Scenario 25</div> <div class="panel-body collapse" id="scenario-25-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-73"> <h5>Given my step 73</h5> </li> <li class="step passed text-success" id="step-74"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-75"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-26"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-26-steps" aria-expanded="false" aria-controls="scenario-26-steps">My Scenario 26</div> <div class="panel-body collapse" id="scenario-26-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-76"> <h5>Given my step 76</h5> </li> <li class="step passed text-success" id="step-77"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-78"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-27"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-27-steps" aria-expanded="false" aria-controls="scenario-27-steps">My Scenario 27</div> <div class="panel-body collapse" id="scenario-27-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-79"> <h5>Given my step 79</h5> </li> <li class="step passed text-success" id="step-80"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-81"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
3. Then there should be a green, yellow, and red bar for the passing, skipped, and failing features under the area name [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-danger">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">27</td> <td class="passed success text-center">19</td> <td class="skipped warning text-center">7</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 70.3703703703704%"></td> <td class="skipped-bar bg-warning" style="width: 25.9259259259259%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">81</td> <td class="passed success text-center">58</td> <td class="skipped warning text-center">22</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 71.6049382716049%"></td> <td class="skipped-bar bg-warning" style="width: 27.1604938271605%"></td> <td class="failed-bar bg-danger" style="width: 1.23456790123457%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 1</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">27</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-2"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-2-steps" aria-expanded="false" aria-controls="scenario-2-steps">My Scenario 2</div> <div class="panel-body collapse" id="scenario-2-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-4"> <h5>Given my step 4</h5> </li> <li class="step passed text-success" id="step-5"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-6"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-3"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-3-steps" aria-expanded="false" aria-controls="scenario-3-steps">My Scenario 3</div> <div class="panel-body collapse" id="scenario-3-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-7"> <h5>Given my step 7</h5> </li> <li class="step passed text-success" id="step-8"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-9"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-2"> <h3 class="text-success" data-toggle="collapse" href="#feature-2-scenarios" aria-expanded="false" aria-controls="feature-2-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-2-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-4"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-4-steps" aria-expanded="false" aria-controls="scenario-4-steps">My Scenario 4</div> <div class="panel-body collapse" id="scenario-4-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-10"> <h5>Given my step 10</h5> </li> <li class="step passed text-success" id="step-11"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-12"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-5"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-5-steps" aria-expanded="false" aria-controls="scenario-5-steps">My Scenario 5</div> <div class="panel-body collapse" id="scenario-5-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-13"> <h5>Given my step 13</h5> </li> <li class="step passed text-success" id="step-14"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-15"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-6"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-6-steps" aria-expanded="false" aria-controls="scenario-6-steps">My Scenario 6</div> <div class="panel-body collapse" id="scenario-6-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-16"> <h5>Given my step 16</h5> </li> <li class="step passed text-success" id="step-17"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-18"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-3"> <h3 class="text-success" data-toggle="collapse" href="#feature-3-scenarios" aria-expanded="false" aria-controls="feature-3-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-3-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-7"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-7-steps" aria-expanded="false" aria-controls="scenario-7-steps">My Scenario 7</div> <div class="panel-body collapse" id="scenario-7-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-19"> <h5>Given my step 19</h5> </li> <li class="step passed text-success" id="step-20"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-21"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-8"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-8-steps" aria-expanded="false" aria-controls="scenario-8-steps">My Scenario 8</div> <div class="panel-body collapse" id="scenario-8-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-22"> <h5>Given my step 22</h5> </li> <li class="step passed text-success" id="step-23"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-24"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-9"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-9-steps" aria-expanded="false" aria-controls="scenario-9-steps">My Scenario 9</div> <div class="panel-body collapse" id="scenario-9-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-25"> <h5>Given my step 25</h5> </li> <li class="step passed text-success" id="step-26"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-27"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-2"> <h2 class="text-warning" data-toggle="collapse" href="#area-2-features" aria-expanded="false" aria-controls="area-2-features">My Area 2</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-2-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">15</td> <td class="skipped warning text-center">12</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #917545;" id="area-2-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-4"> <h3 class="text-warning" data-toggle="collapse" href="#feature-4-scenarios" aria-expanded="false" aria-controls="feature-4-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-4-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-10"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-10-steps" aria-expanded="false" aria-controls="scenario-10-steps">My Scenario 10 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-10-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-28"> <h5>Given my step 28</h5> </li> <li class="step skipped text-warning" id="step-29"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-30"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-11"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-11-steps" aria-expanded="false" aria-controls="scenario-11-steps">My Scenario 11 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-11-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-31"> <h5>Given my step 31</h5> </li> <li class="step skipped text-warning" id="step-32"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-33"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-12"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-12-steps" aria-expanded="false" aria-controls="scenario-12-steps">My Scenario 12</div> <div class="panel-body collapse" id="scenario-12-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-34"> <h5>Given my step 34</h5> </li> <li class="step passed text-success" id="step-35"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-36"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-5"> <h3 class="text-warning" data-toggle="collapse" href="#feature-5-scenarios" aria-expanded="false" aria-controls="feature-5-scenarios">My Feature 4</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-5-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-13"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-13-steps" aria-expanded="false" aria-controls="scenario-13-steps">My Scenario 13 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-13-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-37"> <h5>Given my step 37</h5> </li> <li class="step skipped text-warning" id="step-38"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-39"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-14"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-14-steps" aria-expanded="false" aria-controls="scenario-14-steps">My Scenario 14 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-14-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-40"> <h5>Given my step 40</h5> </li> <li class="step skipped text-warning" id="step-41"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-42"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-15"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-15-steps" aria-expanded="false" aria-controls="scenario-15-steps">My Scenario 15</div> <div class="panel-body collapse" id="scenario-15-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-43"> <h5>Given my step 43</h5> </li> <li class="step passed text-success" id="step-44"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-45"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-6"> <h3 class="text-success" data-toggle="collapse" href="#feature-6-scenarios" aria-expanded="false" aria-controls="feature-6-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-6-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-16"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-16-steps" aria-expanded="false" aria-controls="scenario-16-steps">My Scenario 16</div> <div class="panel-body collapse" id="scenario-16-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-46"> <h5>Given my step 46</h5> </li> <li class="step passed text-success" id="step-47"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-48"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-17"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-17-steps" aria-expanded="false" aria-controls="scenario-17-steps">My Scenario 17</div> <div class="panel-body collapse" id="scenario-17-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-49"> <h5>Given my step 49</h5> </li> <li class="step passed text-success" id="step-50"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-51"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-18"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-18-steps" aria-expanded="false" aria-controls="scenario-18-steps">My Scenario 18</div> <div class="panel-body collapse" id="scenario-18-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-52"> <h5>Given my step 52</h5> </li> <li class="step passed text-success" id="step-53"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-54"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-3"> <h2 class="text-danger" data-toggle="collapse" href="#area-3-features" aria-expanded="true" aria-controls="area-3-features">My Area 3</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-3-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">16</td> <td class="skipped warning text-center">10</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 59.2592592592593%"></td> <td class="skipped-bar bg-warning" style="width: 37.037037037037%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left: 2px solid #AD4D4B;" id="area-3-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #AD4D4B;" id="feature-7"> <h3 class="text-danger" data-toggle="collapse" href="#feature-7-scenarios" aria-expanded="true" aria-controls="feature-7-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 44.4444444444444%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse in" id="feature-7-scenarios" aria-expanded="true"> <li class="scenario failed" id="scenario-19"> <div class="panel panel-danger"> <div class="panel-heading" data-toggle="collapse" href="#scenario-19-steps" aria-expanded="true" aria-controls="scenario-19-steps">My Scenario 19 [Failed]</div> <div class="panel-body collapse in" id="scenario-19-steps" aria-expanded="true"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-55"> <h5>Given my step 55</h5> </li> <li class="step failed text-danger" id="step-56"> <h5>When my failed step 56 [Failed]</h5> <dl class="exception dl-horizontal"> <dt>Error Type</dt> <dd class="error-type">Exception</dd> <dt>Message</dt> <dd class="error-message"><pre>My Error</pre></dd> <dt>Stack</dt> <dd class="error-stack"><pre> at xBDD.Reporting.Test.Steps.HtmlReport.<>c.<OfAFullTestRunWithAllOutcomes>b__2_2(Step s2) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\test\xBDD.Reporting.Test\Steps\HtmlReport.cs:line 123 at xBDD.Core.StepExecutor.ExecuteStep(Step step) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\src\xBDD.Core\Core\StepExecutor.cs:line 44</pre></dd> </dl> </li> <li class="step skipped text-warning" id="step-57"> <h5>Then my step 3 [Skipped - Previous Error]</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-20"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-20-steps" aria-expanded="false" aria-controls="scenario-20-steps">My Scenario 20 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-20-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-58"> <h5>Given my step 58</h5> </li> <li class="step skipped text-warning" id="step-59"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-60"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-21"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-21-steps" aria-expanded="false" aria-controls="scenario-21-steps">My Scenario 21</div> <div class="panel-body collapse" id="scenario-21-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-61"> <h5>Given my step 61</h5> </li> <li class="step passed text-success" id="step-62"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-63"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-8"> <h3 class="text-warning" data-toggle="collapse" href="#feature-8-scenarios" aria-expanded="false" aria-controls="feature-8-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-8-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-22"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-22-steps" aria-expanded="false" aria-controls="scenario-22-steps">My Scenario 22 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-22-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-64"> <h5>Given my step 64</h5> </li> <li class="step skipped text-warning" id="step-65"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-66"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-23"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-23-steps" aria-expanded="false" aria-controls="scenario-23-steps">My Scenario 23 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-23-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-67"> <h5>Given my step 67</h5> </li> <li class="step skipped text-warning" id="step-68"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-69"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-24"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-24-steps" aria-expanded="false" aria-controls="scenario-24-steps">My Scenario 24</div> <div class="panel-body collapse" id="scenario-24-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-70"> <h5>Given my step 70</h5> </li> <li class="step passed text-success" id="step-71"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-72"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-9"> <h3 class="text-success" data-toggle="collapse" href="#feature-9-scenarios" aria-expanded="false" aria-controls="feature-9-scenarios">My Feature 9</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-9-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-25"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-25-steps" aria-expanded="false" aria-controls="scenario-25-steps">My Scenario 25</div> <div class="panel-body collapse" id="scenario-25-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-73"> <h5>Given my step 73</h5> </li> <li class="step passed text-success" id="step-74"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-75"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-26"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-26-steps" aria-expanded="false" aria-controls="scenario-26-steps">My Scenario 26</div> <div class="panel-body collapse" id="scenario-26-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-76"> <h5>Given my step 76</h5> </li> <li class="step passed text-success" id="step-77"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-78"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-27"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-27-steps" aria-expanded="false" aria-controls="scenario-27-steps">My Scenario 27</div> <div class="panel-body collapse" id="scenario-27-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-79"> <h5>Given my step 79</h5> </li> <li class="step passed text-success" id="step-80"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-81"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
4. And the passing, green bar should have a width of 33%
5. And the skipped, yellow bar should have a width of 33%
6. And the failed, red bar should have a width of 33%
7. And the total number of areas should show to the left of the outcome bar with a value of 3
8. And the number of passed features should show to the left of the outcome bar with a value of 1
9. And the number of skipped features should show to the left of the outcome bar with a value of 1
10. And the number of failed features should show to the left of the outcome bar with a value of 1
Failed Skipped And Passing Scenario Stats
1. Given the test results of a full test run with all outcomes
2. When the user views the html report [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-danger">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">27</td> <td class="passed success text-center">19</td> <td class="skipped warning text-center">7</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 70.3703703703704%"></td> <td class="skipped-bar bg-warning" style="width: 25.9259259259259%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">81</td> <td class="passed success text-center">58</td> <td class="skipped warning text-center">22</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 71.6049382716049%"></td> <td class="skipped-bar bg-warning" style="width: 27.1604938271605%"></td> <td class="failed-bar bg-danger" style="width: 1.23456790123457%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 1</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">27</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-2"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-2-steps" aria-expanded="false" aria-controls="scenario-2-steps">My Scenario 2</div> <div class="panel-body collapse" id="scenario-2-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-4"> <h5>Given my step 4</h5> </li> <li class="step passed text-success" id="step-5"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-6"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-3"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-3-steps" aria-expanded="false" aria-controls="scenario-3-steps">My Scenario 3</div> <div class="panel-body collapse" id="scenario-3-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-7"> <h5>Given my step 7</h5> </li> <li class="step passed text-success" id="step-8"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-9"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-2"> <h3 class="text-success" data-toggle="collapse" href="#feature-2-scenarios" aria-expanded="false" aria-controls="feature-2-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-2-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-4"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-4-steps" aria-expanded="false" aria-controls="scenario-4-steps">My Scenario 4</div> <div class="panel-body collapse" id="scenario-4-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-10"> <h5>Given my step 10</h5> </li> <li class="step passed text-success" id="step-11"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-12"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-5"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-5-steps" aria-expanded="false" aria-controls="scenario-5-steps">My Scenario 5</div> <div class="panel-body collapse" id="scenario-5-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-13"> <h5>Given my step 13</h5> </li> <li class="step passed text-success" id="step-14"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-15"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-6"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-6-steps" aria-expanded="false" aria-controls="scenario-6-steps">My Scenario 6</div> <div class="panel-body collapse" id="scenario-6-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-16"> <h5>Given my step 16</h5> </li> <li class="step passed text-success" id="step-17"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-18"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-3"> <h3 class="text-success" data-toggle="collapse" href="#feature-3-scenarios" aria-expanded="false" aria-controls="feature-3-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-3-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-7"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-7-steps" aria-expanded="false" aria-controls="scenario-7-steps">My Scenario 7</div> <div class="panel-body collapse" id="scenario-7-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-19"> <h5>Given my step 19</h5> </li> <li class="step passed text-success" id="step-20"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-21"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-8"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-8-steps" aria-expanded="false" aria-controls="scenario-8-steps">My Scenario 8</div> <div class="panel-body collapse" id="scenario-8-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-22"> <h5>Given my step 22</h5> </li> <li class="step passed text-success" id="step-23"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-24"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-9"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-9-steps" aria-expanded="false" aria-controls="scenario-9-steps">My Scenario 9</div> <div class="panel-body collapse" id="scenario-9-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-25"> <h5>Given my step 25</h5> </li> <li class="step passed text-success" id="step-26"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-27"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-2"> <h2 class="text-warning" data-toggle="collapse" href="#area-2-features" aria-expanded="false" aria-controls="area-2-features">My Area 2</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-2-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">15</td> <td class="skipped warning text-center">12</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #917545;" id="area-2-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-4"> <h3 class="text-warning" data-toggle="collapse" href="#feature-4-scenarios" aria-expanded="false" aria-controls="feature-4-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-4-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-10"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-10-steps" aria-expanded="false" aria-controls="scenario-10-steps">My Scenario 10 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-10-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-28"> <h5>Given my step 28</h5> </li> <li class="step skipped text-warning" id="step-29"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-30"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-11"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-11-steps" aria-expanded="false" aria-controls="scenario-11-steps">My Scenario 11 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-11-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-31"> <h5>Given my step 31</h5> </li> <li class="step skipped text-warning" id="step-32"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-33"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-12"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-12-steps" aria-expanded="false" aria-controls="scenario-12-steps">My Scenario 12</div> <div class="panel-body collapse" id="scenario-12-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-34"> <h5>Given my step 34</h5> </li> <li class="step passed text-success" id="step-35"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-36"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-5"> <h3 class="text-warning" data-toggle="collapse" href="#feature-5-scenarios" aria-expanded="false" aria-controls="feature-5-scenarios">My Feature 4</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-5-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-13"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-13-steps" aria-expanded="false" aria-controls="scenario-13-steps">My Scenario 13 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-13-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-37"> <h5>Given my step 37</h5> </li> <li class="step skipped text-warning" id="step-38"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-39"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-14"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-14-steps" aria-expanded="false" aria-controls="scenario-14-steps">My Scenario 14 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-14-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-40"> <h5>Given my step 40</h5> </li> <li class="step skipped text-warning" id="step-41"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-42"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-15"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-15-steps" aria-expanded="false" aria-controls="scenario-15-steps">My Scenario 15</div> <div class="panel-body collapse" id="scenario-15-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-43"> <h5>Given my step 43</h5> </li> <li class="step passed text-success" id="step-44"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-45"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-6"> <h3 class="text-success" data-toggle="collapse" href="#feature-6-scenarios" aria-expanded="false" aria-controls="feature-6-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-6-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-16"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-16-steps" aria-expanded="false" aria-controls="scenario-16-steps">My Scenario 16</div> <div class="panel-body collapse" id="scenario-16-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-46"> <h5>Given my step 46</h5> </li> <li class="step passed text-success" id="step-47"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-48"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-17"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-17-steps" aria-expanded="false" aria-controls="scenario-17-steps">My Scenario 17</div> <div class="panel-body collapse" id="scenario-17-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-49"> <h5>Given my step 49</h5> </li> <li class="step passed text-success" id="step-50"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-51"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-18"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-18-steps" aria-expanded="false" aria-controls="scenario-18-steps">My Scenario 18</div> <div class="panel-body collapse" id="scenario-18-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-52"> <h5>Given my step 52</h5> </li> <li class="step passed text-success" id="step-53"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-54"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-3"> <h2 class="text-danger" data-toggle="collapse" href="#area-3-features" aria-expanded="true" aria-controls="area-3-features">My Area 3</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-3-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">16</td> <td class="skipped warning text-center">10</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 59.2592592592593%"></td> <td class="skipped-bar bg-warning" style="width: 37.037037037037%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left: 2px solid #AD4D4B;" id="area-3-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #AD4D4B;" id="feature-7"> <h3 class="text-danger" data-toggle="collapse" href="#feature-7-scenarios" aria-expanded="true" aria-controls="feature-7-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 44.4444444444444%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse in" id="feature-7-scenarios" aria-expanded="true"> <li class="scenario failed" id="scenario-19"> <div class="panel panel-danger"> <div class="panel-heading" data-toggle="collapse" href="#scenario-19-steps" aria-expanded="true" aria-controls="scenario-19-steps">My Scenario 19 [Failed]</div> <div class="panel-body collapse in" id="scenario-19-steps" aria-expanded="true"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-55"> <h5>Given my step 55</h5> </li> <li class="step failed text-danger" id="step-56"> <h5>When my failed step 56 [Failed]</h5> <dl class="exception dl-horizontal"> <dt>Error Type</dt> <dd class="error-type">Exception</dd> <dt>Message</dt> <dd class="error-message"><pre>My Error</pre></dd> <dt>Stack</dt> <dd class="error-stack"><pre> at xBDD.Reporting.Test.Steps.HtmlReport.<>c.<OfAFullTestRunWithAllOutcomes>b__2_2(Step s2) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\test\xBDD.Reporting.Test\Steps\HtmlReport.cs:line 123 at xBDD.Core.StepExecutor.ExecuteStep(Step step) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\src\xBDD.Core\Core\StepExecutor.cs:line 44</pre></dd> </dl> </li> <li class="step skipped text-warning" id="step-57"> <h5>Then my step 3 [Skipped - Previous Error]</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-20"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-20-steps" aria-expanded="false" aria-controls="scenario-20-steps">My Scenario 20 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-20-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-58"> <h5>Given my step 58</h5> </li> <li class="step skipped text-warning" id="step-59"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-60"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-21"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-21-steps" aria-expanded="false" aria-controls="scenario-21-steps">My Scenario 21</div> <div class="panel-body collapse" id="scenario-21-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-61"> <h5>Given my step 61</h5> </li> <li class="step passed text-success" id="step-62"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-63"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-8"> <h3 class="text-warning" data-toggle="collapse" href="#feature-8-scenarios" aria-expanded="false" aria-controls="feature-8-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-8-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-22"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-22-steps" aria-expanded="false" aria-controls="scenario-22-steps">My Scenario 22 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-22-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-64"> <h5>Given my step 64</h5> </li> <li class="step skipped text-warning" id="step-65"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-66"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-23"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-23-steps" aria-expanded="false" aria-controls="scenario-23-steps">My Scenario 23 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-23-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-67"> <h5>Given my step 67</h5> </li> <li class="step skipped text-warning" id="step-68"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-69"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-24"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-24-steps" aria-expanded="false" aria-controls="scenario-24-steps">My Scenario 24</div> <div class="panel-body collapse" id="scenario-24-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-70"> <h5>Given my step 70</h5> </li> <li class="step passed text-success" id="step-71"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-72"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-9"> <h3 class="text-success" data-toggle="collapse" href="#feature-9-scenarios" aria-expanded="false" aria-controls="feature-9-scenarios">My Feature 9</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-9-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-25"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-25-steps" aria-expanded="false" aria-controls="scenario-25-steps">My Scenario 25</div> <div class="panel-body collapse" id="scenario-25-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-73"> <h5>Given my step 73</h5> </li> <li class="step passed text-success" id="step-74"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-75"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-26"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-26-steps" aria-expanded="false" aria-controls="scenario-26-steps">My Scenario 26</div> <div class="panel-body collapse" id="scenario-26-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-76"> <h5>Given my step 76</h5> </li> <li class="step passed text-success" id="step-77"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-78"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-27"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-27-steps" aria-expanded="false" aria-controls="scenario-27-steps">My Scenario 27</div> <div class="panel-body collapse" id="scenario-27-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-79"> <h5>Given my step 79</h5> </li> <li class="step passed text-success" id="step-80"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-81"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
3. Then there should be a green, yellow, and red bar for the passing, skipped, and failing scenarios under the area name [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-danger">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">27</td> <td class="passed success text-center">19</td> <td class="skipped warning text-center">7</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 70.3703703703704%"></td> <td class="skipped-bar bg-warning" style="width: 25.9259259259259%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">81</td> <td class="passed success text-center">58</td> <td class="skipped warning text-center">22</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 71.6049382716049%"></td> <td class="skipped-bar bg-warning" style="width: 27.1604938271605%"></td> <td class="failed-bar bg-danger" style="width: 1.23456790123457%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 1</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">27</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-2"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-2-steps" aria-expanded="false" aria-controls="scenario-2-steps">My Scenario 2</div> <div class="panel-body collapse" id="scenario-2-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-4"> <h5>Given my step 4</h5> </li> <li class="step passed text-success" id="step-5"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-6"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-3"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-3-steps" aria-expanded="false" aria-controls="scenario-3-steps">My Scenario 3</div> <div class="panel-body collapse" id="scenario-3-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-7"> <h5>Given my step 7</h5> </li> <li class="step passed text-success" id="step-8"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-9"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-2"> <h3 class="text-success" data-toggle="collapse" href="#feature-2-scenarios" aria-expanded="false" aria-controls="feature-2-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-2-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-4"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-4-steps" aria-expanded="false" aria-controls="scenario-4-steps">My Scenario 4</div> <div class="panel-body collapse" id="scenario-4-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-10"> <h5>Given my step 10</h5> </li> <li class="step passed text-success" id="step-11"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-12"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-5"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-5-steps" aria-expanded="false" aria-controls="scenario-5-steps">My Scenario 5</div> <div class="panel-body collapse" id="scenario-5-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-13"> <h5>Given my step 13</h5> </li> <li class="step passed text-success" id="step-14"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-15"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-6"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-6-steps" aria-expanded="false" aria-controls="scenario-6-steps">My Scenario 6</div> <div class="panel-body collapse" id="scenario-6-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-16"> <h5>Given my step 16</h5> </li> <li class="step passed text-success" id="step-17"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-18"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-3"> <h3 class="text-success" data-toggle="collapse" href="#feature-3-scenarios" aria-expanded="false" aria-controls="feature-3-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-3-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-7"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-7-steps" aria-expanded="false" aria-controls="scenario-7-steps">My Scenario 7</div> <div class="panel-body collapse" id="scenario-7-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-19"> <h5>Given my step 19</h5> </li> <li class="step passed text-success" id="step-20"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-21"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-8"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-8-steps" aria-expanded="false" aria-controls="scenario-8-steps">My Scenario 8</div> <div class="panel-body collapse" id="scenario-8-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-22"> <h5>Given my step 22</h5> </li> <li class="step passed text-success" id="step-23"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-24"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-9"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-9-steps" aria-expanded="false" aria-controls="scenario-9-steps">My Scenario 9</div> <div class="panel-body collapse" id="scenario-9-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-25"> <h5>Given my step 25</h5> </li> <li class="step passed text-success" id="step-26"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-27"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-2"> <h2 class="text-warning" data-toggle="collapse" href="#area-2-features" aria-expanded="false" aria-controls="area-2-features">My Area 2</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-2-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">15</td> <td class="skipped warning text-center">12</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #917545;" id="area-2-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-4"> <h3 class="text-warning" data-toggle="collapse" href="#feature-4-scenarios" aria-expanded="false" aria-controls="feature-4-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-4-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-10"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-10-steps" aria-expanded="false" aria-controls="scenario-10-steps">My Scenario 10 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-10-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-28"> <h5>Given my step 28</h5> </li> <li class="step skipped text-warning" id="step-29"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-30"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-11"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-11-steps" aria-expanded="false" aria-controls="scenario-11-steps">My Scenario 11 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-11-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-31"> <h5>Given my step 31</h5> </li> <li class="step skipped text-warning" id="step-32"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-33"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-12"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-12-steps" aria-expanded="false" aria-controls="scenario-12-steps">My Scenario 12</div> <div class="panel-body collapse" id="scenario-12-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-34"> <h5>Given my step 34</h5> </li> <li class="step passed text-success" id="step-35"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-36"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-5"> <h3 class="text-warning" data-toggle="collapse" href="#feature-5-scenarios" aria-expanded="false" aria-controls="feature-5-scenarios">My Feature 4</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-5-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-13"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-13-steps" aria-expanded="false" aria-controls="scenario-13-steps">My Scenario 13 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-13-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-37"> <h5>Given my step 37</h5> </li> <li class="step skipped text-warning" id="step-38"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-39"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-14"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-14-steps" aria-expanded="false" aria-controls="scenario-14-steps">My Scenario 14 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-14-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-40"> <h5>Given my step 40</h5> </li> <li class="step skipped text-warning" id="step-41"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-42"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-15"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-15-steps" aria-expanded="false" aria-controls="scenario-15-steps">My Scenario 15</div> <div class="panel-body collapse" id="scenario-15-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-43"> <h5>Given my step 43</h5> </li> <li class="step passed text-success" id="step-44"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-45"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-6"> <h3 class="text-success" data-toggle="collapse" href="#feature-6-scenarios" aria-expanded="false" aria-controls="feature-6-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-6-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-16"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-16-steps" aria-expanded="false" aria-controls="scenario-16-steps">My Scenario 16</div> <div class="panel-body collapse" id="scenario-16-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-46"> <h5>Given my step 46</h5> </li> <li class="step passed text-success" id="step-47"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-48"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-17"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-17-steps" aria-expanded="false" aria-controls="scenario-17-steps">My Scenario 17</div> <div class="panel-body collapse" id="scenario-17-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-49"> <h5>Given my step 49</h5> </li> <li class="step passed text-success" id="step-50"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-51"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-18"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-18-steps" aria-expanded="false" aria-controls="scenario-18-steps">My Scenario 18</div> <div class="panel-body collapse" id="scenario-18-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-52"> <h5>Given my step 52</h5> </li> <li class="step passed text-success" id="step-53"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-54"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-3"> <h2 class="text-danger" data-toggle="collapse" href="#area-3-features" aria-expanded="true" aria-controls="area-3-features">My Area 3</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-3-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">16</td> <td class="skipped warning text-center">10</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 59.2592592592593%"></td> <td class="skipped-bar bg-warning" style="width: 37.037037037037%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left: 2px solid #AD4D4B;" id="area-3-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #AD4D4B;" id="feature-7"> <h3 class="text-danger" data-toggle="collapse" href="#feature-7-scenarios" aria-expanded="true" aria-controls="feature-7-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 44.4444444444444%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse in" id="feature-7-scenarios" aria-expanded="true"> <li class="scenario failed" id="scenario-19"> <div class="panel panel-danger"> <div class="panel-heading" data-toggle="collapse" href="#scenario-19-steps" aria-expanded="true" aria-controls="scenario-19-steps">My Scenario 19 [Failed]</div> <div class="panel-body collapse in" id="scenario-19-steps" aria-expanded="true"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-55"> <h5>Given my step 55</h5> </li> <li class="step failed text-danger" id="step-56"> <h5>When my failed step 56 [Failed]</h5> <dl class="exception dl-horizontal"> <dt>Error Type</dt> <dd class="error-type">Exception</dd> <dt>Message</dt> <dd class="error-message"><pre>My Error</pre></dd> <dt>Stack</dt> <dd class="error-stack"><pre> at xBDD.Reporting.Test.Steps.HtmlReport.<>c.<OfAFullTestRunWithAllOutcomes>b__2_2(Step s2) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\test\xBDD.Reporting.Test\Steps\HtmlReport.cs:line 123 at xBDD.Core.StepExecutor.ExecuteStep(Step step) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\src\xBDD.Core\Core\StepExecutor.cs:line 44</pre></dd> </dl> </li> <li class="step skipped text-warning" id="step-57"> <h5>Then my step 3 [Skipped - Previous Error]</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-20"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-20-steps" aria-expanded="false" aria-controls="scenario-20-steps">My Scenario 20 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-20-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-58"> <h5>Given my step 58</h5> </li> <li class="step skipped text-warning" id="step-59"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-60"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-21"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-21-steps" aria-expanded="false" aria-controls="scenario-21-steps">My Scenario 21</div> <div class="panel-body collapse" id="scenario-21-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-61"> <h5>Given my step 61</h5> </li> <li class="step passed text-success" id="step-62"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-63"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-8"> <h3 class="text-warning" data-toggle="collapse" href="#feature-8-scenarios" aria-expanded="false" aria-controls="feature-8-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-8-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-22"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-22-steps" aria-expanded="false" aria-controls="scenario-22-steps">My Scenario 22 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-22-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-64"> <h5>Given my step 64</h5> </li> <li class="step skipped text-warning" id="step-65"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-66"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-23"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-23-steps" aria-expanded="false" aria-controls="scenario-23-steps">My Scenario 23 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-23-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-67"> <h5>Given my step 67</h5> </li> <li class="step skipped text-warning" id="step-68"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-69"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-24"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-24-steps" aria-expanded="false" aria-controls="scenario-24-steps">My Scenario 24</div> <div class="panel-body collapse" id="scenario-24-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-70"> <h5>Given my step 70</h5> </li> <li class="step passed text-success" id="step-71"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-72"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-9"> <h3 class="text-success" data-toggle="collapse" href="#feature-9-scenarios" aria-expanded="false" aria-controls="feature-9-scenarios">My Feature 9</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-9-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-25"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-25-steps" aria-expanded="false" aria-controls="scenario-25-steps">My Scenario 25</div> <div class="panel-body collapse" id="scenario-25-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-73"> <h5>Given my step 73</h5> </li> <li class="step passed text-success" id="step-74"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-75"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-26"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-26-steps" aria-expanded="false" aria-controls="scenario-26-steps">My Scenario 26</div> <div class="panel-body collapse" id="scenario-26-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-76"> <h5>Given my step 76</h5> </li> <li class="step passed text-success" id="step-77"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-78"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-27"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-27-steps" aria-expanded="false" aria-controls="scenario-27-steps">My Scenario 27</div> <div class="panel-body collapse" id="scenario-27-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-79"> <h5>Given my step 79</h5> </li> <li class="step passed text-success" id="step-80"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-81"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
4. And the passing, green bar should have a width of 56%
5. And the skipped, yellow bar should have a width of 33%
6. And the failed, red bar should have a width of 11%
7. And the total number of scenarios should show to the left of the outcome bar with a value of 9
8. And the number of passed scenarios should show to the left of the outcome bar with a value of 5
9. And the number of skipped scenarios should show to the left of the outcome bar with a value of 3
10. And the number of failed scenarios should show to the left of the outcome bar with a value of 1
Failed Skipped And Passing Steps Stats
1. Given the test results of a full test run with all outcomes
2. When the user views the html report [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-danger">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">27</td> <td class="passed success text-center">19</td> <td class="skipped warning text-center">7</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 70.3703703703704%"></td> <td class="skipped-bar bg-warning" style="width: 25.9259259259259%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">81</td> <td class="passed success text-center">58</td> <td class="skipped warning text-center">22</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 71.6049382716049%"></td> <td class="skipped-bar bg-warning" style="width: 27.1604938271605%"></td> <td class="failed-bar bg-danger" style="width: 1.23456790123457%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 1</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">27</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-2"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-2-steps" aria-expanded="false" aria-controls="scenario-2-steps">My Scenario 2</div> <div class="panel-body collapse" id="scenario-2-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-4"> <h5>Given my step 4</h5> </li> <li class="step passed text-success" id="step-5"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-6"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-3"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-3-steps" aria-expanded="false" aria-controls="scenario-3-steps">My Scenario 3</div> <div class="panel-body collapse" id="scenario-3-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-7"> <h5>Given my step 7</h5> </li> <li class="step passed text-success" id="step-8"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-9"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-2"> <h3 class="text-success" data-toggle="collapse" href="#feature-2-scenarios" aria-expanded="false" aria-controls="feature-2-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-2-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-4"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-4-steps" aria-expanded="false" aria-controls="scenario-4-steps">My Scenario 4</div> <div class="panel-body collapse" id="scenario-4-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-10"> <h5>Given my step 10</h5> </li> <li class="step passed text-success" id="step-11"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-12"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-5"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-5-steps" aria-expanded="false" aria-controls="scenario-5-steps">My Scenario 5</div> <div class="panel-body collapse" id="scenario-5-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-13"> <h5>Given my step 13</h5> </li> <li class="step passed text-success" id="step-14"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-15"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-6"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-6-steps" aria-expanded="false" aria-controls="scenario-6-steps">My Scenario 6</div> <div class="panel-body collapse" id="scenario-6-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-16"> <h5>Given my step 16</h5> </li> <li class="step passed text-success" id="step-17"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-18"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-3"> <h3 class="text-success" data-toggle="collapse" href="#feature-3-scenarios" aria-expanded="false" aria-controls="feature-3-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-3-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-7"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-7-steps" aria-expanded="false" aria-controls="scenario-7-steps">My Scenario 7</div> <div class="panel-body collapse" id="scenario-7-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-19"> <h5>Given my step 19</h5> </li> <li class="step passed text-success" id="step-20"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-21"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-8"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-8-steps" aria-expanded="false" aria-controls="scenario-8-steps">My Scenario 8</div> <div class="panel-body collapse" id="scenario-8-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-22"> <h5>Given my step 22</h5> </li> <li class="step passed text-success" id="step-23"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-24"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-9"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-9-steps" aria-expanded="false" aria-controls="scenario-9-steps">My Scenario 9</div> <div class="panel-body collapse" id="scenario-9-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-25"> <h5>Given my step 25</h5> </li> <li class="step passed text-success" id="step-26"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-27"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-2"> <h2 class="text-warning" data-toggle="collapse" href="#area-2-features" aria-expanded="false" aria-controls="area-2-features">My Area 2</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-2-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">15</td> <td class="skipped warning text-center">12</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #917545;" id="area-2-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-4"> <h3 class="text-warning" data-toggle="collapse" href="#feature-4-scenarios" aria-expanded="false" aria-controls="feature-4-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-4-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-10"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-10-steps" aria-expanded="false" aria-controls="scenario-10-steps">My Scenario 10 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-10-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-28"> <h5>Given my step 28</h5> </li> <li class="step skipped text-warning" id="step-29"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-30"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-11"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-11-steps" aria-expanded="false" aria-controls="scenario-11-steps">My Scenario 11 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-11-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-31"> <h5>Given my step 31</h5> </li> <li class="step skipped text-warning" id="step-32"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-33"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-12"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-12-steps" aria-expanded="false" aria-controls="scenario-12-steps">My Scenario 12</div> <div class="panel-body collapse" id="scenario-12-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-34"> <h5>Given my step 34</h5> </li> <li class="step passed text-success" id="step-35"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-36"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-5"> <h3 class="text-warning" data-toggle="collapse" href="#feature-5-scenarios" aria-expanded="false" aria-controls="feature-5-scenarios">My Feature 4</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-5-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-13"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-13-steps" aria-expanded="false" aria-controls="scenario-13-steps">My Scenario 13 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-13-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-37"> <h5>Given my step 37</h5> </li> <li class="step skipped text-warning" id="step-38"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-39"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-14"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-14-steps" aria-expanded="false" aria-controls="scenario-14-steps">My Scenario 14 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-14-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-40"> <h5>Given my step 40</h5> </li> <li class="step skipped text-warning" id="step-41"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-42"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-15"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-15-steps" aria-expanded="false" aria-controls="scenario-15-steps">My Scenario 15</div> <div class="panel-body collapse" id="scenario-15-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-43"> <h5>Given my step 43</h5> </li> <li class="step passed text-success" id="step-44"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-45"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-6"> <h3 class="text-success" data-toggle="collapse" href="#feature-6-scenarios" aria-expanded="false" aria-controls="feature-6-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-6-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-16"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-16-steps" aria-expanded="false" aria-controls="scenario-16-steps">My Scenario 16</div> <div class="panel-body collapse" id="scenario-16-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-46"> <h5>Given my step 46</h5> </li> <li class="step passed text-success" id="step-47"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-48"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-17"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-17-steps" aria-expanded="false" aria-controls="scenario-17-steps">My Scenario 17</div> <div class="panel-body collapse" id="scenario-17-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-49"> <h5>Given my step 49</h5> </li> <li class="step passed text-success" id="step-50"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-51"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-18"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-18-steps" aria-expanded="false" aria-controls="scenario-18-steps">My Scenario 18</div> <div class="panel-body collapse" id="scenario-18-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-52"> <h5>Given my step 52</h5> </li> <li class="step passed text-success" id="step-53"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-54"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-3"> <h2 class="text-danger" data-toggle="collapse" href="#area-3-features" aria-expanded="true" aria-controls="area-3-features">My Area 3</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-3-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">16</td> <td class="skipped warning text-center">10</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 59.2592592592593%"></td> <td class="skipped-bar bg-warning" style="width: 37.037037037037%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left: 2px solid #AD4D4B;" id="area-3-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #AD4D4B;" id="feature-7"> <h3 class="text-danger" data-toggle="collapse" href="#feature-7-scenarios" aria-expanded="true" aria-controls="feature-7-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 44.4444444444444%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse in" id="feature-7-scenarios" aria-expanded="true"> <li class="scenario failed" id="scenario-19"> <div class="panel panel-danger"> <div class="panel-heading" data-toggle="collapse" href="#scenario-19-steps" aria-expanded="true" aria-controls="scenario-19-steps">My Scenario 19 [Failed]</div> <div class="panel-body collapse in" id="scenario-19-steps" aria-expanded="true"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-55"> <h5>Given my step 55</h5> </li> <li class="step failed text-danger" id="step-56"> <h5>When my failed step 56 [Failed]</h5> <dl class="exception dl-horizontal"> <dt>Error Type</dt> <dd class="error-type">Exception</dd> <dt>Message</dt> <dd class="error-message"><pre>My Error</pre></dd> <dt>Stack</dt> <dd class="error-stack"><pre> at xBDD.Reporting.Test.Steps.HtmlReport.<>c.<OfAFullTestRunWithAllOutcomes>b__2_2(Step s2) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\test\xBDD.Reporting.Test\Steps\HtmlReport.cs:line 123 at xBDD.Core.StepExecutor.ExecuteStep(Step step) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\src\xBDD.Core\Core\StepExecutor.cs:line 44</pre></dd> </dl> </li> <li class="step skipped text-warning" id="step-57"> <h5>Then my step 3 [Skipped - Previous Error]</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-20"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-20-steps" aria-expanded="false" aria-controls="scenario-20-steps">My Scenario 20 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-20-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-58"> <h5>Given my step 58</h5> </li> <li class="step skipped text-warning" id="step-59"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-60"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-21"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-21-steps" aria-expanded="false" aria-controls="scenario-21-steps">My Scenario 21</div> <div class="panel-body collapse" id="scenario-21-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-61"> <h5>Given my step 61</h5> </li> <li class="step passed text-success" id="step-62"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-63"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-8"> <h3 class="text-warning" data-toggle="collapse" href="#feature-8-scenarios" aria-expanded="false" aria-controls="feature-8-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-8-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-22"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-22-steps" aria-expanded="false" aria-controls="scenario-22-steps">My Scenario 22 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-22-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-64"> <h5>Given my step 64</h5> </li> <li class="step skipped text-warning" id="step-65"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-66"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-23"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-23-steps" aria-expanded="false" aria-controls="scenario-23-steps">My Scenario 23 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-23-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-67"> <h5>Given my step 67</h5> </li> <li class="step skipped text-warning" id="step-68"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-69"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-24"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-24-steps" aria-expanded="false" aria-controls="scenario-24-steps">My Scenario 24</div> <div class="panel-body collapse" id="scenario-24-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-70"> <h5>Given my step 70</h5> </li> <li class="step passed text-success" id="step-71"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-72"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-9"> <h3 class="text-success" data-toggle="collapse" href="#feature-9-scenarios" aria-expanded="false" aria-controls="feature-9-scenarios">My Feature 9</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-9-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-25"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-25-steps" aria-expanded="false" aria-controls="scenario-25-steps">My Scenario 25</div> <div class="panel-body collapse" id="scenario-25-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-73"> <h5>Given my step 73</h5> </li> <li class="step passed text-success" id="step-74"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-75"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-26"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-26-steps" aria-expanded="false" aria-controls="scenario-26-steps">My Scenario 26</div> <div class="panel-body collapse" id="scenario-26-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-76"> <h5>Given my step 76</h5> </li> <li class="step passed text-success" id="step-77"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-78"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-27"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-27-steps" aria-expanded="false" aria-controls="scenario-27-steps">My Scenario 27</div> <div class="panel-body collapse" id="scenario-27-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-79"> <h5>Given my step 79</h5> </li> <li class="step passed text-success" id="step-80"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-81"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
3. Then there should be a green, yellow, and red bar for the passing, skipped, and failing steps under the area name [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-danger">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">27</td> <td class="passed success text-center">19</td> <td class="skipped warning text-center">7</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 70.3703703703704%"></td> <td class="skipped-bar bg-warning" style="width: 25.9259259259259%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">81</td> <td class="passed success text-center">58</td> <td class="skipped warning text-center">22</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 71.6049382716049%"></td> <td class="skipped-bar bg-warning" style="width: 27.1604938271605%"></td> <td class="failed-bar bg-danger" style="width: 1.23456790123457%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 1</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">27</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-2"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-2-steps" aria-expanded="false" aria-controls="scenario-2-steps">My Scenario 2</div> <div class="panel-body collapse" id="scenario-2-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-4"> <h5>Given my step 4</h5> </li> <li class="step passed text-success" id="step-5"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-6"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-3"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-3-steps" aria-expanded="false" aria-controls="scenario-3-steps">My Scenario 3</div> <div class="panel-body collapse" id="scenario-3-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-7"> <h5>Given my step 7</h5> </li> <li class="step passed text-success" id="step-8"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-9"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-2"> <h3 class="text-success" data-toggle="collapse" href="#feature-2-scenarios" aria-expanded="false" aria-controls="feature-2-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-2-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-4"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-4-steps" aria-expanded="false" aria-controls="scenario-4-steps">My Scenario 4</div> <div class="panel-body collapse" id="scenario-4-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-10"> <h5>Given my step 10</h5> </li> <li class="step passed text-success" id="step-11"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-12"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-5"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-5-steps" aria-expanded="false" aria-controls="scenario-5-steps">My Scenario 5</div> <div class="panel-body collapse" id="scenario-5-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-13"> <h5>Given my step 13</h5> </li> <li class="step passed text-success" id="step-14"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-15"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-6"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-6-steps" aria-expanded="false" aria-controls="scenario-6-steps">My Scenario 6</div> <div class="panel-body collapse" id="scenario-6-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-16"> <h5>Given my step 16</h5> </li> <li class="step passed text-success" id="step-17"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-18"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-3"> <h3 class="text-success" data-toggle="collapse" href="#feature-3-scenarios" aria-expanded="false" aria-controls="feature-3-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-3-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-7"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-7-steps" aria-expanded="false" aria-controls="scenario-7-steps">My Scenario 7</div> <div class="panel-body collapse" id="scenario-7-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-19"> <h5>Given my step 19</h5> </li> <li class="step passed text-success" id="step-20"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-21"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-8"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-8-steps" aria-expanded="false" aria-controls="scenario-8-steps">My Scenario 8</div> <div class="panel-body collapse" id="scenario-8-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-22"> <h5>Given my step 22</h5> </li> <li class="step passed text-success" id="step-23"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-24"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-9"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-9-steps" aria-expanded="false" aria-controls="scenario-9-steps">My Scenario 9</div> <div class="panel-body collapse" id="scenario-9-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-25"> <h5>Given my step 25</h5> </li> <li class="step passed text-success" id="step-26"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-27"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-2"> <h2 class="text-warning" data-toggle="collapse" href="#area-2-features" aria-expanded="false" aria-controls="area-2-features">My Area 2</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-2-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">15</td> <td class="skipped warning text-center">12</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #917545;" id="area-2-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-4"> <h3 class="text-warning" data-toggle="collapse" href="#feature-4-scenarios" aria-expanded="false" aria-controls="feature-4-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-4-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-10"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-10-steps" aria-expanded="false" aria-controls="scenario-10-steps">My Scenario 10 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-10-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-28"> <h5>Given my step 28</h5> </li> <li class="step skipped text-warning" id="step-29"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-30"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-11"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-11-steps" aria-expanded="false" aria-controls="scenario-11-steps">My Scenario 11 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-11-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-31"> <h5>Given my step 31</h5> </li> <li class="step skipped text-warning" id="step-32"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-33"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-12"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-12-steps" aria-expanded="false" aria-controls="scenario-12-steps">My Scenario 12</div> <div class="panel-body collapse" id="scenario-12-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-34"> <h5>Given my step 34</h5> </li> <li class="step passed text-success" id="step-35"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-36"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-5"> <h3 class="text-warning" data-toggle="collapse" href="#feature-5-scenarios" aria-expanded="false" aria-controls="feature-5-scenarios">My Feature 4</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-5-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-13"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-13-steps" aria-expanded="false" aria-controls="scenario-13-steps">My Scenario 13 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-13-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-37"> <h5>Given my step 37</h5> </li> <li class="step skipped text-warning" id="step-38"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-39"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-14"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-14-steps" aria-expanded="false" aria-controls="scenario-14-steps">My Scenario 14 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-14-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-40"> <h5>Given my step 40</h5> </li> <li class="step skipped text-warning" id="step-41"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-42"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-15"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-15-steps" aria-expanded="false" aria-controls="scenario-15-steps">My Scenario 15</div> <div class="panel-body collapse" id="scenario-15-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-43"> <h5>Given my step 43</h5> </li> <li class="step passed text-success" id="step-44"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-45"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-6"> <h3 class="text-success" data-toggle="collapse" href="#feature-6-scenarios" aria-expanded="false" aria-controls="feature-6-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-6-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-16"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-16-steps" aria-expanded="false" aria-controls="scenario-16-steps">My Scenario 16</div> <div class="panel-body collapse" id="scenario-16-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-46"> <h5>Given my step 46</h5> </li> <li class="step passed text-success" id="step-47"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-48"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-17"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-17-steps" aria-expanded="false" aria-controls="scenario-17-steps">My Scenario 17</div> <div class="panel-body collapse" id="scenario-17-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-49"> <h5>Given my step 49</h5> </li> <li class="step passed text-success" id="step-50"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-51"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-18"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-18-steps" aria-expanded="false" aria-controls="scenario-18-steps">My Scenario 18</div> <div class="panel-body collapse" id="scenario-18-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-52"> <h5>Given my step 52</h5> </li> <li class="step passed text-success" id="step-53"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-54"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-3"> <h2 class="text-danger" data-toggle="collapse" href="#area-3-features" aria-expanded="true" aria-controls="area-3-features">My Area 3</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-3-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">16</td> <td class="skipped warning text-center">10</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 59.2592592592593%"></td> <td class="skipped-bar bg-warning" style="width: 37.037037037037%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left: 2px solid #AD4D4B;" id="area-3-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #AD4D4B;" id="feature-7"> <h3 class="text-danger" data-toggle="collapse" href="#feature-7-scenarios" aria-expanded="true" aria-controls="feature-7-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 44.4444444444444%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse in" id="feature-7-scenarios" aria-expanded="true"> <li class="scenario failed" id="scenario-19"> <div class="panel panel-danger"> <div class="panel-heading" data-toggle="collapse" href="#scenario-19-steps" aria-expanded="true" aria-controls="scenario-19-steps">My Scenario 19 [Failed]</div> <div class="panel-body collapse in" id="scenario-19-steps" aria-expanded="true"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-55"> <h5>Given my step 55</h5> </li> <li class="step failed text-danger" id="step-56"> <h5>When my failed step 56 [Failed]</h5> <dl class="exception dl-horizontal"> <dt>Error Type</dt> <dd class="error-type">Exception</dd> <dt>Message</dt> <dd class="error-message"><pre>My Error</pre></dd> <dt>Stack</dt> <dd class="error-stack"><pre> at xBDD.Reporting.Test.Steps.HtmlReport.<>c.<OfAFullTestRunWithAllOutcomes>b__2_2(Step s2) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\test\xBDD.Reporting.Test\Steps\HtmlReport.cs:line 123 at xBDD.Core.StepExecutor.ExecuteStep(Step step) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\src\xBDD.Core\Core\StepExecutor.cs:line 44</pre></dd> </dl> </li> <li class="step skipped text-warning" id="step-57"> <h5>Then my step 3 [Skipped - Previous Error]</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-20"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-20-steps" aria-expanded="false" aria-controls="scenario-20-steps">My Scenario 20 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-20-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-58"> <h5>Given my step 58</h5> </li> <li class="step skipped text-warning" id="step-59"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-60"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-21"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-21-steps" aria-expanded="false" aria-controls="scenario-21-steps">My Scenario 21</div> <div class="panel-body collapse" id="scenario-21-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-61"> <h5>Given my step 61</h5> </li> <li class="step passed text-success" id="step-62"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-63"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-8"> <h3 class="text-warning" data-toggle="collapse" href="#feature-8-scenarios" aria-expanded="false" aria-controls="feature-8-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-8-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-22"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-22-steps" aria-expanded="false" aria-controls="scenario-22-steps">My Scenario 22 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-22-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-64"> <h5>Given my step 64</h5> </li> <li class="step skipped text-warning" id="step-65"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-66"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-23"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-23-steps" aria-expanded="false" aria-controls="scenario-23-steps">My Scenario 23 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-23-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-67"> <h5>Given my step 67</h5> </li> <li class="step skipped text-warning" id="step-68"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-69"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-24"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-24-steps" aria-expanded="false" aria-controls="scenario-24-steps">My Scenario 24</div> <div class="panel-body collapse" id="scenario-24-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-70"> <h5>Given my step 70</h5> </li> <li class="step passed text-success" id="step-71"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-72"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-9"> <h3 class="text-success" data-toggle="collapse" href="#feature-9-scenarios" aria-expanded="false" aria-controls="feature-9-scenarios">My Feature 9</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-9-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-25"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-25-steps" aria-expanded="false" aria-controls="scenario-25-steps">My Scenario 25</div> <div class="panel-body collapse" id="scenario-25-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-73"> <h5>Given my step 73</h5> </li> <li class="step passed text-success" id="step-74"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-75"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-26"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-26-steps" aria-expanded="false" aria-controls="scenario-26-steps">My Scenario 26</div> <div class="panel-body collapse" id="scenario-26-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-76"> <h5>Given my step 76</h5> </li> <li class="step passed text-success" id="step-77"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-78"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-27"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-27-steps" aria-expanded="false" aria-controls="scenario-27-steps">My Scenario 27</div> <div class="panel-body collapse" id="scenario-27-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-79"> <h5>Given my step 79</h5> </li> <li class="step passed text-success" id="step-80"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-81"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
4. And the passing, green bar should have a width of 59%
5. And the skipped, yellow bar should have a width of 37%
6. And the failed, red bar should have a width of 4%
7. And the total number of steps should show to the left of the outcome bar with a value of 27
8. And the number of passed steps should show to the left of the outcome bar with a value of 16
9. And the number of skipped steps should show to the left of the outcome bar with a value of 10
10. And the number of failed steps should show to the left of the outcome bar with a value of 1

View Failure Only

Scenarios

Steps

Multiple Areas [Skipped - Not Started]
Single Area Multiple Features [Skipped - Not Started]
Single Feature Multiple Scenarios [Skipped - Not Started]
Single Scenario [Skipped - Not Started]

View Feature

Scenarios

Steps

Description [Skipped - Not Started]
Failing [Skipped - Not Started]
Name [Skipped - Not Started]
Passing
1. Given the test results of a passing full test run
2. When the user views the html report [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-success">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">4</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">8</td> <td class="passed success text-center">8</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">24</td> <td class="passed success text-center">24</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 1</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">4</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">12</td> <td class="passed success text-center">12</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">6</td> <td class="passed success text-center">6</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-2"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-2-steps" aria-expanded="false" aria-controls="scenario-2-steps">My Scenario 2</div> <div class="panel-body collapse" id="scenario-2-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-4"> <h5>Given my step 4</h5> </li> <li class="step passed text-success" id="step-5"> <h5>When my step 5</h5> </li> <li class="step passed text-success" id="step-6"> <h5>Then my step 6</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-2"> <h3 class="text-success" data-toggle="collapse" href="#feature-2-scenarios" aria-expanded="false" aria-controls="feature-2-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">6</td> <td class="passed success text-center">6</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-2-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-3"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-3-steps" aria-expanded="false" aria-controls="scenario-3-steps">My Scenario 3</div> <div class="panel-body collapse" id="scenario-3-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-7"> <h5>Given my step 7</h5> </li> <li class="step passed text-success" id="step-8"> <h5>When my step 8</h5> </li> <li class="step passed text-success" id="step-9"> <h5>Then my step 9</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-4"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-4-steps" aria-expanded="false" aria-controls="scenario-4-steps">My Scenario 4</div> <div class="panel-body collapse" id="scenario-4-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-10"> <h5>Given my step 10</h5> </li> <li class="step passed text-success" id="step-11"> <h5>When my step 11</h5> </li> <li class="step passed text-success" id="step-12"> <h5>Then my step 12</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-2"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-2-features" aria-expanded="false" aria-controls="area-2-features">My Area 2</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-2-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">4</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">12</td> <td class="passed success text-center">12</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-2-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-3"> <h3 class="text-success" data-toggle="collapse" href="#feature-3-scenarios" aria-expanded="false" aria-controls="feature-3-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">6</td> <td class="passed success text-center">6</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-3-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-5"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-5-steps" aria-expanded="false" aria-controls="scenario-5-steps">My Scenario 5</div> <div class="panel-body collapse" id="scenario-5-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-13"> <h5>Given my step 13</h5> </li> <li class="step passed text-success" id="step-14"> <h5>When my step 14</h5> </li> <li class="step passed text-success" id="step-15"> <h5>Then my step 15</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-6"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-6-steps" aria-expanded="false" aria-controls="scenario-6-steps">My Scenario 6</div> <div class="panel-body collapse" id="scenario-6-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-16"> <h5>Given my step 16</h5> </li> <li class="step passed text-success" id="step-17"> <h5>When my step 17</h5> </li> <li class="step passed text-success" id="step-18"> <h5>Then my step 18</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-4"> <h3 class="text-success" data-toggle="collapse" href="#feature-4-scenarios" aria-expanded="false" aria-controls="feature-4-scenarios">My Feature 4</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">6</td> <td class="passed success text-center">6</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-4-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-7"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-7-steps" aria-expanded="false" aria-controls="scenario-7-steps">My Scenario 7</div> <div class="panel-body collapse" id="scenario-7-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-19"> <h5>Given my step 19</h5> </li> <li class="step passed text-success" id="step-20"> <h5>When my step 20</h5> </li> <li class="step passed text-success" id="step-21"> <h5>Then my step 21</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-8"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-8-steps" aria-expanded="false" aria-controls="scenario-8-steps">My Scenario 8</div> <div class="panel-body collapse" id="scenario-8-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-22"> <h5>Given my step 22</h5> </li> <li class="step passed text-success" id="step-23"> <h5>When my step 23</h5> </li> <li class="step passed text-success" id="step-24"> <h5>Then my step 24</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
3. And the user expands the first area
4. Then the report will show the feature indented under the area [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-success">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">4</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">8</td> <td class="passed success text-center">8</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">24</td> <td class="passed success text-center">24</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success" data-toggle="collapse" href="#area-1-features" aria-expanded="true" aria-controls="area-1-features">My Area 1</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">4</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">12</td> <td class="passed success text-center">12</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left-width: 2px; border-left-style: solid; border-left-color: rgb(90, 139, 91);" id="area-1-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">6</td> <td class="passed success text-center">6</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-2"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-2-steps" aria-expanded="false" aria-controls="scenario-2-steps">My Scenario 2</div> <div class="panel-body collapse" id="scenario-2-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-4"> <h5>Given my step 4</h5> </li> <li class="step passed text-success" id="step-5"> <h5>When my step 5</h5> </li> <li class="step passed text-success" id="step-6"> <h5>Then my step 6</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-2"> <h3 class="text-success" data-toggle="collapse" href="#feature-2-scenarios" aria-expanded="false" aria-controls="feature-2-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">6</td> <td class="passed success text-center">6</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-2-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-3"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-3-steps" aria-expanded="false" aria-controls="scenario-3-steps">My Scenario 3</div> <div class="panel-body collapse" id="scenario-3-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-7"> <h5>Given my step 7</h5> </li> <li class="step passed text-success" id="step-8"> <h5>When my step 8</h5> </li> <li class="step passed text-success" id="step-9"> <h5>Then my step 9</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-4"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-4-steps" aria-expanded="false" aria-controls="scenario-4-steps">My Scenario 4</div> <div class="panel-body collapse" id="scenario-4-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-10"> <h5>Given my step 10</h5> </li> <li class="step passed text-success" id="step-11"> <h5>When my step 11</h5> </li> <li class="step passed text-success" id="step-12"> <h5>Then my step 12</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-2"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-2-features" aria-expanded="false" aria-controls="area-2-features">My Area 2</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-2-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">4</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">12</td> <td class="passed success text-center">12</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-2-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-3"> <h3 class="text-success" data-toggle="collapse" href="#feature-3-scenarios" aria-expanded="false" aria-controls="feature-3-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">6</td> <td class="passed success text-center">6</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-3-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-5"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-5-steps" aria-expanded="false" aria-controls="scenario-5-steps">My Scenario 5</div> <div class="panel-body collapse" id="scenario-5-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-13"> <h5>Given my step 13</h5> </li> <li class="step passed text-success" id="step-14"> <h5>When my step 14</h5> </li> <li class="step passed text-success" id="step-15"> <h5>Then my step 15</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-6"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-6-steps" aria-expanded="false" aria-controls="scenario-6-steps">My Scenario 6</div> <div class="panel-body collapse" id="scenario-6-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-16"> <h5>Given my step 16</h5> </li> <li class="step passed text-success" id="step-17"> <h5>When my step 17</h5> </li> <li class="step passed text-success" id="step-18"> <h5>Then my step 18</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-4"> <h3 class="text-success" data-toggle="collapse" href="#feature-4-scenarios" aria-expanded="false" aria-controls="feature-4-scenarios">My Feature 4</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">6</td> <td class="passed success text-center">6</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-4-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-7"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-7-steps" aria-expanded="false" aria-controls="scenario-7-steps">My Scenario 7</div> <div class="panel-body collapse" id="scenario-7-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-19"> <h5>Given my step 19</h5> </li> <li class="step passed text-success" id="step-20"> <h5>When my step 20</h5> </li> <li class="step passed text-success" id="step-21"> <h5>Then my step 21</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-8"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-8-steps" aria-expanded="false" aria-controls="scenario-8-steps">My Scenario 8</div> <div class="panel-body collapse" id="scenario-8-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-22"> <h5>Given my step 22</h5> </li> <li class="step passed text-success" id="step-23"> <h5>When my step 23</h5> </li> <li class="step passed text-success" id="step-24"> <h5>Then my step 24</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
5. And the feature name will be green to indicate its passed
6. And the scenarios under the feature will be collapsed
Skipped [Skipped - Not Started]

View Feature Stats

Scenarios

Steps

All Failed [Skipped - Not Started]
All Passing [Skipped - Not Started]
All Skipped [Skipped - Not Started]
Failed Skipped And Passing Scenario Stats
1. Given the test results of a full test run with all outcomes
2. When the user views the html report [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-danger">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">27</td> <td class="passed success text-center">19</td> <td class="skipped warning text-center">7</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 70.3703703703704%"></td> <td class="skipped-bar bg-warning" style="width: 25.9259259259259%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">81</td> <td class="passed success text-center">58</td> <td class="skipped warning text-center">22</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 71.6049382716049%"></td> <td class="skipped-bar bg-warning" style="width: 27.1604938271605%"></td> <td class="failed-bar bg-danger" style="width: 1.23456790123457%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 1</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">27</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-2"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-2-steps" aria-expanded="false" aria-controls="scenario-2-steps">My Scenario 2</div> <div class="panel-body collapse" id="scenario-2-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-4"> <h5>Given my step 4</h5> </li> <li class="step passed text-success" id="step-5"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-6"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-3"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-3-steps" aria-expanded="false" aria-controls="scenario-3-steps">My Scenario 3</div> <div class="panel-body collapse" id="scenario-3-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-7"> <h5>Given my step 7</h5> </li> <li class="step passed text-success" id="step-8"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-9"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-2"> <h3 class="text-success" data-toggle="collapse" href="#feature-2-scenarios" aria-expanded="false" aria-controls="feature-2-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-2-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-4"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-4-steps" aria-expanded="false" aria-controls="scenario-4-steps">My Scenario 4</div> <div class="panel-body collapse" id="scenario-4-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-10"> <h5>Given my step 10</h5> </li> <li class="step passed text-success" id="step-11"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-12"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-5"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-5-steps" aria-expanded="false" aria-controls="scenario-5-steps">My Scenario 5</div> <div class="panel-body collapse" id="scenario-5-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-13"> <h5>Given my step 13</h5> </li> <li class="step passed text-success" id="step-14"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-15"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-6"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-6-steps" aria-expanded="false" aria-controls="scenario-6-steps">My Scenario 6</div> <div class="panel-body collapse" id="scenario-6-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-16"> <h5>Given my step 16</h5> </li> <li class="step passed text-success" id="step-17"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-18"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-3"> <h3 class="text-success" data-toggle="collapse" href="#feature-3-scenarios" aria-expanded="false" aria-controls="feature-3-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-3-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-7"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-7-steps" aria-expanded="false" aria-controls="scenario-7-steps">My Scenario 7</div> <div class="panel-body collapse" id="scenario-7-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-19"> <h5>Given my step 19</h5> </li> <li class="step passed text-success" id="step-20"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-21"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-8"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-8-steps" aria-expanded="false" aria-controls="scenario-8-steps">My Scenario 8</div> <div class="panel-body collapse" id="scenario-8-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-22"> <h5>Given my step 22</h5> </li> <li class="step passed text-success" id="step-23"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-24"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-9"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-9-steps" aria-expanded="false" aria-controls="scenario-9-steps">My Scenario 9</div> <div class="panel-body collapse" id="scenario-9-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-25"> <h5>Given my step 25</h5> </li> <li class="step passed text-success" id="step-26"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-27"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-2"> <h2 class="text-warning" data-toggle="collapse" href="#area-2-features" aria-expanded="false" aria-controls="area-2-features">My Area 2</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-2-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">15</td> <td class="skipped warning text-center">12</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #917545;" id="area-2-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-4"> <h3 class="text-warning" data-toggle="collapse" href="#feature-4-scenarios" aria-expanded="false" aria-controls="feature-4-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-4-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-10"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-10-steps" aria-expanded="false" aria-controls="scenario-10-steps">My Scenario 10 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-10-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-28"> <h5>Given my step 28</h5> </li> <li class="step skipped text-warning" id="step-29"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-30"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-11"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-11-steps" aria-expanded="false" aria-controls="scenario-11-steps">My Scenario 11 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-11-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-31"> <h5>Given my step 31</h5> </li> <li class="step skipped text-warning" id="step-32"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-33"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-12"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-12-steps" aria-expanded="false" aria-controls="scenario-12-steps">My Scenario 12</div> <div class="panel-body collapse" id="scenario-12-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-34"> <h5>Given my step 34</h5> </li> <li class="step passed text-success" id="step-35"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-36"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-5"> <h3 class="text-warning" data-toggle="collapse" href="#feature-5-scenarios" aria-expanded="false" aria-controls="feature-5-scenarios">My Feature 4</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-5-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-13"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-13-steps" aria-expanded="false" aria-controls="scenario-13-steps">My Scenario 13 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-13-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-37"> <h5>Given my step 37</h5> </li> <li class="step skipped text-warning" id="step-38"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-39"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-14"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-14-steps" aria-expanded="false" aria-controls="scenario-14-steps">My Scenario 14 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-14-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-40"> <h5>Given my step 40</h5> </li> <li class="step skipped text-warning" id="step-41"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-42"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-15"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-15-steps" aria-expanded="false" aria-controls="scenario-15-steps">My Scenario 15</div> <div class="panel-body collapse" id="scenario-15-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-43"> <h5>Given my step 43</h5> </li> <li class="step passed text-success" id="step-44"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-45"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-6"> <h3 class="text-success" data-toggle="collapse" href="#feature-6-scenarios" aria-expanded="false" aria-controls="feature-6-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-6-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-16"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-16-steps" aria-expanded="false" aria-controls="scenario-16-steps">My Scenario 16</div> <div class="panel-body collapse" id="scenario-16-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-46"> <h5>Given my step 46</h5> </li> <li class="step passed text-success" id="step-47"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-48"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-17"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-17-steps" aria-expanded="false" aria-controls="scenario-17-steps">My Scenario 17</div> <div class="panel-body collapse" id="scenario-17-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-49"> <h5>Given my step 49</h5> </li> <li class="step passed text-success" id="step-50"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-51"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-18"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-18-steps" aria-expanded="false" aria-controls="scenario-18-steps">My Scenario 18</div> <div class="panel-body collapse" id="scenario-18-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-52"> <h5>Given my step 52</h5> </li> <li class="step passed text-success" id="step-53"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-54"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-3"> <h2 class="text-danger" data-toggle="collapse" href="#area-3-features" aria-expanded="true" aria-controls="area-3-features">My Area 3</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-3-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">16</td> <td class="skipped warning text-center">10</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 59.2592592592593%"></td> <td class="skipped-bar bg-warning" style="width: 37.037037037037%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left: 2px solid #AD4D4B;" id="area-3-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #AD4D4B;" id="feature-7"> <h3 class="text-danger" data-toggle="collapse" href="#feature-7-scenarios" aria-expanded="true" aria-controls="feature-7-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 44.4444444444444%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse in" id="feature-7-scenarios" aria-expanded="true"> <li class="scenario failed" id="scenario-19"> <div class="panel panel-danger"> <div class="panel-heading" data-toggle="collapse" href="#scenario-19-steps" aria-expanded="true" aria-controls="scenario-19-steps">My Scenario 19 [Failed]</div> <div class="panel-body collapse in" id="scenario-19-steps" aria-expanded="true"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-55"> <h5>Given my step 55</h5> </li> <li class="step failed text-danger" id="step-56"> <h5>When my failed step 56 [Failed]</h5> <dl class="exception dl-horizontal"> <dt>Error Type</dt> <dd class="error-type">Exception</dd> <dt>Message</dt> <dd class="error-message"><pre>My Error</pre></dd> <dt>Stack</dt> <dd class="error-stack"><pre> at xBDD.Reporting.Test.Steps.HtmlReport.<>c.<OfAFullTestRunWithAllOutcomes>b__2_2(Step s2) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\test\xBDD.Reporting.Test\Steps\HtmlReport.cs:line 123 at xBDD.Core.StepExecutor.ExecuteStep(Step step) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\src\xBDD.Core\Core\StepExecutor.cs:line 44</pre></dd> </dl> </li> <li class="step skipped text-warning" id="step-57"> <h5>Then my step 3 [Skipped - Previous Error]</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-20"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-20-steps" aria-expanded="false" aria-controls="scenario-20-steps">My Scenario 20 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-20-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-58"> <h5>Given my step 58</h5> </li> <li class="step skipped text-warning" id="step-59"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-60"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-21"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-21-steps" aria-expanded="false" aria-controls="scenario-21-steps">My Scenario 21</div> <div class="panel-body collapse" id="scenario-21-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-61"> <h5>Given my step 61</h5> </li> <li class="step passed text-success" id="step-62"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-63"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-8"> <h3 class="text-warning" data-toggle="collapse" href="#feature-8-scenarios" aria-expanded="false" aria-controls="feature-8-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-8-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-22"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-22-steps" aria-expanded="false" aria-controls="scenario-22-steps">My Scenario 22 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-22-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-64"> <h5>Given my step 64</h5> </li> <li class="step skipped text-warning" id="step-65"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-66"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-23"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-23-steps" aria-expanded="false" aria-controls="scenario-23-steps">My Scenario 23 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-23-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-67"> <h5>Given my step 67</h5> </li> <li class="step skipped text-warning" id="step-68"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-69"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-24"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-24-steps" aria-expanded="false" aria-controls="scenario-24-steps">My Scenario 24</div> <div class="panel-body collapse" id="scenario-24-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-70"> <h5>Given my step 70</h5> </li> <li class="step passed text-success" id="step-71"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-72"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-9"> <h3 class="text-success" data-toggle="collapse" href="#feature-9-scenarios" aria-expanded="false" aria-controls="feature-9-scenarios">My Feature 9</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-9-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-25"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-25-steps" aria-expanded="false" aria-controls="scenario-25-steps">My Scenario 25</div> <div class="panel-body collapse" id="scenario-25-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-73"> <h5>Given my step 73</h5> </li> <li class="step passed text-success" id="step-74"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-75"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-26"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-26-steps" aria-expanded="false" aria-controls="scenario-26-steps">My Scenario 26</div> <div class="panel-body collapse" id="scenario-26-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-76"> <h5>Given my step 76</h5> </li> <li class="step passed text-success" id="step-77"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-78"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-27"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-27-steps" aria-expanded="false" aria-controls="scenario-27-steps">My Scenario 27</div> <div class="panel-body collapse" id="scenario-27-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-79"> <h5>Given my step 79</h5> </li> <li class="step passed text-success" id="step-80"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-81"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
3. Then there should be a green, yellow, and red bar for the passing, skipped, and failing scenarios under the feature name [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-danger">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">27</td> <td class="passed success text-center">19</td> <td class="skipped warning text-center">7</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 70.3703703703704%"></td> <td class="skipped-bar bg-warning" style="width: 25.9259259259259%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">81</td> <td class="passed success text-center">58</td> <td class="skipped warning text-center">22</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 71.6049382716049%"></td> <td class="skipped-bar bg-warning" style="width: 27.1604938271605%"></td> <td class="failed-bar bg-danger" style="width: 1.23456790123457%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 1</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">27</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-2"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-2-steps" aria-expanded="false" aria-controls="scenario-2-steps">My Scenario 2</div> <div class="panel-body collapse" id="scenario-2-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-4"> <h5>Given my step 4</h5> </li> <li class="step passed text-success" id="step-5"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-6"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-3"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-3-steps" aria-expanded="false" aria-controls="scenario-3-steps">My Scenario 3</div> <div class="panel-body collapse" id="scenario-3-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-7"> <h5>Given my step 7</h5> </li> <li class="step passed text-success" id="step-8"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-9"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-2"> <h3 class="text-success" data-toggle="collapse" href="#feature-2-scenarios" aria-expanded="false" aria-controls="feature-2-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-2-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-4"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-4-steps" aria-expanded="false" aria-controls="scenario-4-steps">My Scenario 4</div> <div class="panel-body collapse" id="scenario-4-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-10"> <h5>Given my step 10</h5> </li> <li class="step passed text-success" id="step-11"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-12"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-5"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-5-steps" aria-expanded="false" aria-controls="scenario-5-steps">My Scenario 5</div> <div class="panel-body collapse" id="scenario-5-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-13"> <h5>Given my step 13</h5> </li> <li class="step passed text-success" id="step-14"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-15"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-6"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-6-steps" aria-expanded="false" aria-controls="scenario-6-steps">My Scenario 6</div> <div class="panel-body collapse" id="scenario-6-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-16"> <h5>Given my step 16</h5> </li> <li class="step passed text-success" id="step-17"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-18"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-3"> <h3 class="text-success" data-toggle="collapse" href="#feature-3-scenarios" aria-expanded="false" aria-controls="feature-3-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-3-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-7"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-7-steps" aria-expanded="false" aria-controls="scenario-7-steps">My Scenario 7</div> <div class="panel-body collapse" id="scenario-7-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-19"> <h5>Given my step 19</h5> </li> <li class="step passed text-success" id="step-20"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-21"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-8"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-8-steps" aria-expanded="false" aria-controls="scenario-8-steps">My Scenario 8</div> <div class="panel-body collapse" id="scenario-8-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-22"> <h5>Given my step 22</h5> </li> <li class="step passed text-success" id="step-23"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-24"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-9"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-9-steps" aria-expanded="false" aria-controls="scenario-9-steps">My Scenario 9</div> <div class="panel-body collapse" id="scenario-9-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-25"> <h5>Given my step 25</h5> </li> <li class="step passed text-success" id="step-26"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-27"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-2"> <h2 class="text-warning" data-toggle="collapse" href="#area-2-features" aria-expanded="false" aria-controls="area-2-features">My Area 2</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-2-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">15</td> <td class="skipped warning text-center">12</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #917545;" id="area-2-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-4"> <h3 class="text-warning" data-toggle="collapse" href="#feature-4-scenarios" aria-expanded="false" aria-controls="feature-4-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-4-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-10"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-10-steps" aria-expanded="false" aria-controls="scenario-10-steps">My Scenario 10 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-10-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-28"> <h5>Given my step 28</h5> </li> <li class="step skipped text-warning" id="step-29"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-30"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-11"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-11-steps" aria-expanded="false" aria-controls="scenario-11-steps">My Scenario 11 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-11-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-31"> <h5>Given my step 31</h5> </li> <li class="step skipped text-warning" id="step-32"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-33"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-12"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-12-steps" aria-expanded="false" aria-controls="scenario-12-steps">My Scenario 12</div> <div class="panel-body collapse" id="scenario-12-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-34"> <h5>Given my step 34</h5> </li> <li class="step passed text-success" id="step-35"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-36"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-5"> <h3 class="text-warning" data-toggle="collapse" href="#feature-5-scenarios" aria-expanded="false" aria-controls="feature-5-scenarios">My Feature 4</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-5-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-13"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-13-steps" aria-expanded="false" aria-controls="scenario-13-steps">My Scenario 13 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-13-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-37"> <h5>Given my step 37</h5> </li> <li class="step skipped text-warning" id="step-38"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-39"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-14"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-14-steps" aria-expanded="false" aria-controls="scenario-14-steps">My Scenario 14 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-14-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-40"> <h5>Given my step 40</h5> </li> <li class="step skipped text-warning" id="step-41"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-42"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-15"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-15-steps" aria-expanded="false" aria-controls="scenario-15-steps">My Scenario 15</div> <div class="panel-body collapse" id="scenario-15-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-43"> <h5>Given my step 43</h5> </li> <li class="step passed text-success" id="step-44"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-45"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-6"> <h3 class="text-success" data-toggle="collapse" href="#feature-6-scenarios" aria-expanded="false" aria-controls="feature-6-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-6-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-16"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-16-steps" aria-expanded="false" aria-controls="scenario-16-steps">My Scenario 16</div> <div class="panel-body collapse" id="scenario-16-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-46"> <h5>Given my step 46</h5> </li> <li class="step passed text-success" id="step-47"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-48"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-17"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-17-steps" aria-expanded="false" aria-controls="scenario-17-steps">My Scenario 17</div> <div class="panel-body collapse" id="scenario-17-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-49"> <h5>Given my step 49</h5> </li> <li class="step passed text-success" id="step-50"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-51"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-18"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-18-steps" aria-expanded="false" aria-controls="scenario-18-steps">My Scenario 18</div> <div class="panel-body collapse" id="scenario-18-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-52"> <h5>Given my step 52</h5> </li> <li class="step passed text-success" id="step-53"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-54"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-3"> <h2 class="text-danger" data-toggle="collapse" href="#area-3-features" aria-expanded="true" aria-controls="area-3-features">My Area 3</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-3-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">16</td> <td class="skipped warning text-center">10</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 59.2592592592593%"></td> <td class="skipped-bar bg-warning" style="width: 37.037037037037%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left: 2px solid #AD4D4B;" id="area-3-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #AD4D4B;" id="feature-7"> <h3 class="text-danger" data-toggle="collapse" href="#feature-7-scenarios" aria-expanded="true" aria-controls="feature-7-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 44.4444444444444%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse in" id="feature-7-scenarios" aria-expanded="true"> <li class="scenario failed" id="scenario-19"> <div class="panel panel-danger"> <div class="panel-heading" data-toggle="collapse" href="#scenario-19-steps" aria-expanded="true" aria-controls="scenario-19-steps">My Scenario 19 [Failed]</div> <div class="panel-body collapse in" id="scenario-19-steps" aria-expanded="true"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-55"> <h5>Given my step 55</h5> </li> <li class="step failed text-danger" id="step-56"> <h5>When my failed step 56 [Failed]</h5> <dl class="exception dl-horizontal"> <dt>Error Type</dt> <dd class="error-type">Exception</dd> <dt>Message</dt> <dd class="error-message"><pre>My Error</pre></dd> <dt>Stack</dt> <dd class="error-stack"><pre> at xBDD.Reporting.Test.Steps.HtmlReport.<>c.<OfAFullTestRunWithAllOutcomes>b__2_2(Step s2) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\test\xBDD.Reporting.Test\Steps\HtmlReport.cs:line 123 at xBDD.Core.StepExecutor.ExecuteStep(Step step) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\src\xBDD.Core\Core\StepExecutor.cs:line 44</pre></dd> </dl> </li> <li class="step skipped text-warning" id="step-57"> <h5>Then my step 3 [Skipped - Previous Error]</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-20"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-20-steps" aria-expanded="false" aria-controls="scenario-20-steps">My Scenario 20 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-20-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-58"> <h5>Given my step 58</h5> </li> <li class="step skipped text-warning" id="step-59"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-60"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-21"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-21-steps" aria-expanded="false" aria-controls="scenario-21-steps">My Scenario 21</div> <div class="panel-body collapse" id="scenario-21-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-61"> <h5>Given my step 61</h5> </li> <li class="step passed text-success" id="step-62"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-63"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-8"> <h3 class="text-warning" data-toggle="collapse" href="#feature-8-scenarios" aria-expanded="false" aria-controls="feature-8-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-8-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-22"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-22-steps" aria-expanded="false" aria-controls="scenario-22-steps">My Scenario 22 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-22-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-64"> <h5>Given my step 64</h5> </li> <li class="step skipped text-warning" id="step-65"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-66"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-23"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-23-steps" aria-expanded="false" aria-controls="scenario-23-steps">My Scenario 23 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-23-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-67"> <h5>Given my step 67</h5> </li> <li class="step skipped text-warning" id="step-68"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-69"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-24"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-24-steps" aria-expanded="false" aria-controls="scenario-24-steps">My Scenario 24</div> <div class="panel-body collapse" id="scenario-24-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-70"> <h5>Given my step 70</h5> </li> <li class="step passed text-success" id="step-71"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-72"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-9"> <h3 class="text-success" data-toggle="collapse" href="#feature-9-scenarios" aria-expanded="false" aria-controls="feature-9-scenarios">My Feature 9</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-9-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-25"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-25-steps" aria-expanded="false" aria-controls="scenario-25-steps">My Scenario 25</div> <div class="panel-body collapse" id="scenario-25-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-73"> <h5>Given my step 73</h5> </li> <li class="step passed text-success" id="step-74"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-75"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-26"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-26-steps" aria-expanded="false" aria-controls="scenario-26-steps">My Scenario 26</div> <div class="panel-body collapse" id="scenario-26-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-76"> <h5>Given my step 76</h5> </li> <li class="step passed text-success" id="step-77"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-78"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-27"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-27-steps" aria-expanded="false" aria-controls="scenario-27-steps">My Scenario 27</div> <div class="panel-body collapse" id="scenario-27-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-79"> <h5>Given my step 79</h5> </li> <li class="step passed text-success" id="step-80"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-81"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
4. And the passing, green bar should have a width of 33%
5. And the skipped, yellow bar should have a width of 33%
6. And the failed, red bar should have a width of 33%
7. And the total number of scenarios should show to the left of the outcome bar with a value of 3
8. And the number of passed scenarios should show to the left of the outcome bar with a value of 1
9. And the number of skipped scenarios should show to the left of the outcome bar with a value of 1
10. And the number of failed scenarios should show to the left of the outcome bar with a value of 1
Failed Skipped And Passing Steps Stats
1. Given the test results of a full test run with all outcomes
2. When the user views the html report [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-danger">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">27</td> <td class="passed success text-center">19</td> <td class="skipped warning text-center">7</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 70.3703703703704%"></td> <td class="skipped-bar bg-warning" style="width: 25.9259259259259%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">81</td> <td class="passed success text-center">58</td> <td class="skipped warning text-center">22</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 71.6049382716049%"></td> <td class="skipped-bar bg-warning" style="width: 27.1604938271605%"></td> <td class="failed-bar bg-danger" style="width: 1.23456790123457%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 1</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">27</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-2"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-2-steps" aria-expanded="false" aria-controls="scenario-2-steps">My Scenario 2</div> <div class="panel-body collapse" id="scenario-2-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-4"> <h5>Given my step 4</h5> </li> <li class="step passed text-success" id="step-5"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-6"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-3"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-3-steps" aria-expanded="false" aria-controls="scenario-3-steps">My Scenario 3</div> <div class="panel-body collapse" id="scenario-3-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-7"> <h5>Given my step 7</h5> </li> <li class="step passed text-success" id="step-8"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-9"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-2"> <h3 class="text-success" data-toggle="collapse" href="#feature-2-scenarios" aria-expanded="false" aria-controls="feature-2-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-2-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-4"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-4-steps" aria-expanded="false" aria-controls="scenario-4-steps">My Scenario 4</div> <div class="panel-body collapse" id="scenario-4-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-10"> <h5>Given my step 10</h5> </li> <li class="step passed text-success" id="step-11"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-12"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-5"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-5-steps" aria-expanded="false" aria-controls="scenario-5-steps">My Scenario 5</div> <div class="panel-body collapse" id="scenario-5-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-13"> <h5>Given my step 13</h5> </li> <li class="step passed text-success" id="step-14"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-15"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-6"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-6-steps" aria-expanded="false" aria-controls="scenario-6-steps">My Scenario 6</div> <div class="panel-body collapse" id="scenario-6-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-16"> <h5>Given my step 16</h5> </li> <li class="step passed text-success" id="step-17"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-18"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-3"> <h3 class="text-success" data-toggle="collapse" href="#feature-3-scenarios" aria-expanded="false" aria-controls="feature-3-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-3-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-7"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-7-steps" aria-expanded="false" aria-controls="scenario-7-steps">My Scenario 7</div> <div class="panel-body collapse" id="scenario-7-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-19"> <h5>Given my step 19</h5> </li> <li class="step passed text-success" id="step-20"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-21"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-8"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-8-steps" aria-expanded="false" aria-controls="scenario-8-steps">My Scenario 8</div> <div class="panel-body collapse" id="scenario-8-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-22"> <h5>Given my step 22</h5> </li> <li class="step passed text-success" id="step-23"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-24"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-9"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-9-steps" aria-expanded="false" aria-controls="scenario-9-steps">My Scenario 9</div> <div class="panel-body collapse" id="scenario-9-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-25"> <h5>Given my step 25</h5> </li> <li class="step passed text-success" id="step-26"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-27"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-2"> <h2 class="text-warning" data-toggle="collapse" href="#area-2-features" aria-expanded="false" aria-controls="area-2-features">My Area 2</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-2-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">15</td> <td class="skipped warning text-center">12</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #917545;" id="area-2-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-4"> <h3 class="text-warning" data-toggle="collapse" href="#feature-4-scenarios" aria-expanded="false" aria-controls="feature-4-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-4-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-10"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-10-steps" aria-expanded="false" aria-controls="scenario-10-steps">My Scenario 10 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-10-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-28"> <h5>Given my step 28</h5> </li> <li class="step skipped text-warning" id="step-29"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-30"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-11"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-11-steps" aria-expanded="false" aria-controls="scenario-11-steps">My Scenario 11 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-11-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-31"> <h5>Given my step 31</h5> </li> <li class="step skipped text-warning" id="step-32"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-33"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-12"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-12-steps" aria-expanded="false" aria-controls="scenario-12-steps">My Scenario 12</div> <div class="panel-body collapse" id="scenario-12-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-34"> <h5>Given my step 34</h5> </li> <li class="step passed text-success" id="step-35"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-36"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-5"> <h3 class="text-warning" data-toggle="collapse" href="#feature-5-scenarios" aria-expanded="false" aria-controls="feature-5-scenarios">My Feature 4</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-5-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-13"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-13-steps" aria-expanded="false" aria-controls="scenario-13-steps">My Scenario 13 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-13-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-37"> <h5>Given my step 37</h5> </li> <li class="step skipped text-warning" id="step-38"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-39"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-14"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-14-steps" aria-expanded="false" aria-controls="scenario-14-steps">My Scenario 14 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-14-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-40"> <h5>Given my step 40</h5> </li> <li class="step skipped text-warning" id="step-41"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-42"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-15"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-15-steps" aria-expanded="false" aria-controls="scenario-15-steps">My Scenario 15</div> <div class="panel-body collapse" id="scenario-15-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-43"> <h5>Given my step 43</h5> </li> <li class="step passed text-success" id="step-44"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-45"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-6"> <h3 class="text-success" data-toggle="collapse" href="#feature-6-scenarios" aria-expanded="false" aria-controls="feature-6-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-6-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-16"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-16-steps" aria-expanded="false" aria-controls="scenario-16-steps">My Scenario 16</div> <div class="panel-body collapse" id="scenario-16-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-46"> <h5>Given my step 46</h5> </li> <li class="step passed text-success" id="step-47"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-48"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-17"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-17-steps" aria-expanded="false" aria-controls="scenario-17-steps">My Scenario 17</div> <div class="panel-body collapse" id="scenario-17-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-49"> <h5>Given my step 49</h5> </li> <li class="step passed text-success" id="step-50"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-51"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-18"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-18-steps" aria-expanded="false" aria-controls="scenario-18-steps">My Scenario 18</div> <div class="panel-body collapse" id="scenario-18-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-52"> <h5>Given my step 52</h5> </li> <li class="step passed text-success" id="step-53"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-54"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-3"> <h2 class="text-danger" data-toggle="collapse" href="#area-3-features" aria-expanded="true" aria-controls="area-3-features">My Area 3</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-3-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">16</td> <td class="skipped warning text-center">10</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 59.2592592592593%"></td> <td class="skipped-bar bg-warning" style="width: 37.037037037037%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left: 2px solid #AD4D4B;" id="area-3-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #AD4D4B;" id="feature-7"> <h3 class="text-danger" data-toggle="collapse" href="#feature-7-scenarios" aria-expanded="true" aria-controls="feature-7-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 44.4444444444444%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse in" id="feature-7-scenarios" aria-expanded="true"> <li class="scenario failed" id="scenario-19"> <div class="panel panel-danger"> <div class="panel-heading" data-toggle="collapse" href="#scenario-19-steps" aria-expanded="true" aria-controls="scenario-19-steps">My Scenario 19 [Failed]</div> <div class="panel-body collapse in" id="scenario-19-steps" aria-expanded="true"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-55"> <h5>Given my step 55</h5> </li> <li class="step failed text-danger" id="step-56"> <h5>When my failed step 56 [Failed]</h5> <dl class="exception dl-horizontal"> <dt>Error Type</dt> <dd class="error-type">Exception</dd> <dt>Message</dt> <dd class="error-message"><pre>My Error</pre></dd> <dt>Stack</dt> <dd class="error-stack"><pre> at xBDD.Reporting.Test.Steps.HtmlReport.<>c.<OfAFullTestRunWithAllOutcomes>b__2_2(Step s2) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\test\xBDD.Reporting.Test\Steps\HtmlReport.cs:line 123 at xBDD.Core.StepExecutor.ExecuteStep(Step step) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\src\xBDD.Core\Core\StepExecutor.cs:line 44</pre></dd> </dl> </li> <li class="step skipped text-warning" id="step-57"> <h5>Then my step 3 [Skipped - Previous Error]</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-20"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-20-steps" aria-expanded="false" aria-controls="scenario-20-steps">My Scenario 20 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-20-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-58"> <h5>Given my step 58</h5> </li> <li class="step skipped text-warning" id="step-59"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-60"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-21"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-21-steps" aria-expanded="false" aria-controls="scenario-21-steps">My Scenario 21</div> <div class="panel-body collapse" id="scenario-21-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-61"> <h5>Given my step 61</h5> </li> <li class="step passed text-success" id="step-62"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-63"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-8"> <h3 class="text-warning" data-toggle="collapse" href="#feature-8-scenarios" aria-expanded="false" aria-controls="feature-8-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-8-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-22"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-22-steps" aria-expanded="false" aria-controls="scenario-22-steps">My Scenario 22 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-22-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-64"> <h5>Given my step 64</h5> </li> <li class="step skipped text-warning" id="step-65"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-66"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-23"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-23-steps" aria-expanded="false" aria-controls="scenario-23-steps">My Scenario 23 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-23-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-67"> <h5>Given my step 67</h5> </li> <li class="step skipped text-warning" id="step-68"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-69"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-24"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-24-steps" aria-expanded="false" aria-controls="scenario-24-steps">My Scenario 24</div> <div class="panel-body collapse" id="scenario-24-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-70"> <h5>Given my step 70</h5> </li> <li class="step passed text-success" id="step-71"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-72"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-9"> <h3 class="text-success" data-toggle="collapse" href="#feature-9-scenarios" aria-expanded="false" aria-controls="feature-9-scenarios">My Feature 9</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-9-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-25"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-25-steps" aria-expanded="false" aria-controls="scenario-25-steps">My Scenario 25</div> <div class="panel-body collapse" id="scenario-25-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-73"> <h5>Given my step 73</h5> </li> <li class="step passed text-success" id="step-74"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-75"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-26"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-26-steps" aria-expanded="false" aria-controls="scenario-26-steps">My Scenario 26</div> <div class="panel-body collapse" id="scenario-26-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-76"> <h5>Given my step 76</h5> </li> <li class="step passed text-success" id="step-77"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-78"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-27"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-27-steps" aria-expanded="false" aria-controls="scenario-27-steps">My Scenario 27</div> <div class="panel-body collapse" id="scenario-27-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-79"> <h5>Given my step 79</h5> </li> <li class="step passed text-success" id="step-80"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-81"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
3. Then there should be a green, yellow, and red bar for the passing, skipped, and failing steps under the feature name [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-danger">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">27</td> <td class="passed success text-center">19</td> <td class="skipped warning text-center">7</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 70.3703703703704%"></td> <td class="skipped-bar bg-warning" style="width: 25.9259259259259%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">81</td> <td class="passed success text-center">58</td> <td class="skipped warning text-center">22</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 71.6049382716049%"></td> <td class="skipped-bar bg-warning" style="width: 27.1604938271605%"></td> <td class="failed-bar bg-danger" style="width: 1.23456790123457%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 1</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">27</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-2"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-2-steps" aria-expanded="false" aria-controls="scenario-2-steps">My Scenario 2</div> <div class="panel-body collapse" id="scenario-2-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-4"> <h5>Given my step 4</h5> </li> <li class="step passed text-success" id="step-5"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-6"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-3"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-3-steps" aria-expanded="false" aria-controls="scenario-3-steps">My Scenario 3</div> <div class="panel-body collapse" id="scenario-3-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-7"> <h5>Given my step 7</h5> </li> <li class="step passed text-success" id="step-8"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-9"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-2"> <h3 class="text-success" data-toggle="collapse" href="#feature-2-scenarios" aria-expanded="false" aria-controls="feature-2-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-2-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-4"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-4-steps" aria-expanded="false" aria-controls="scenario-4-steps">My Scenario 4</div> <div class="panel-body collapse" id="scenario-4-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-10"> <h5>Given my step 10</h5> </li> <li class="step passed text-success" id="step-11"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-12"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-5"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-5-steps" aria-expanded="false" aria-controls="scenario-5-steps">My Scenario 5</div> <div class="panel-body collapse" id="scenario-5-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-13"> <h5>Given my step 13</h5> </li> <li class="step passed text-success" id="step-14"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-15"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-6"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-6-steps" aria-expanded="false" aria-controls="scenario-6-steps">My Scenario 6</div> <div class="panel-body collapse" id="scenario-6-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-16"> <h5>Given my step 16</h5> </li> <li class="step passed text-success" id="step-17"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-18"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-3"> <h3 class="text-success" data-toggle="collapse" href="#feature-3-scenarios" aria-expanded="false" aria-controls="feature-3-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-3-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-7"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-7-steps" aria-expanded="false" aria-controls="scenario-7-steps">My Scenario 7</div> <div class="panel-body collapse" id="scenario-7-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-19"> <h5>Given my step 19</h5> </li> <li class="step passed text-success" id="step-20"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-21"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-8"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-8-steps" aria-expanded="false" aria-controls="scenario-8-steps">My Scenario 8</div> <div class="panel-body collapse" id="scenario-8-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-22"> <h5>Given my step 22</h5> </li> <li class="step passed text-success" id="step-23"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-24"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-9"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-9-steps" aria-expanded="false" aria-controls="scenario-9-steps">My Scenario 9</div> <div class="panel-body collapse" id="scenario-9-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-25"> <h5>Given my step 25</h5> </li> <li class="step passed text-success" id="step-26"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-27"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-2"> <h2 class="text-warning" data-toggle="collapse" href="#area-2-features" aria-expanded="false" aria-controls="area-2-features">My Area 2</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-2-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">15</td> <td class="skipped warning text-center">12</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #917545;" id="area-2-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-4"> <h3 class="text-warning" data-toggle="collapse" href="#feature-4-scenarios" aria-expanded="false" aria-controls="feature-4-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-4-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-10"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-10-steps" aria-expanded="false" aria-controls="scenario-10-steps">My Scenario 10 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-10-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-28"> <h5>Given my step 28</h5> </li> <li class="step skipped text-warning" id="step-29"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-30"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-11"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-11-steps" aria-expanded="false" aria-controls="scenario-11-steps">My Scenario 11 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-11-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-31"> <h5>Given my step 31</h5> </li> <li class="step skipped text-warning" id="step-32"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-33"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-12"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-12-steps" aria-expanded="false" aria-controls="scenario-12-steps">My Scenario 12</div> <div class="panel-body collapse" id="scenario-12-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-34"> <h5>Given my step 34</h5> </li> <li class="step passed text-success" id="step-35"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-36"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-5"> <h3 class="text-warning" data-toggle="collapse" href="#feature-5-scenarios" aria-expanded="false" aria-controls="feature-5-scenarios">My Feature 4</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-5-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-13"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-13-steps" aria-expanded="false" aria-controls="scenario-13-steps">My Scenario 13 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-13-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-37"> <h5>Given my step 37</h5> </li> <li class="step skipped text-warning" id="step-38"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-39"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-14"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-14-steps" aria-expanded="false" aria-controls="scenario-14-steps">My Scenario 14 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-14-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-40"> <h5>Given my step 40</h5> </li> <li class="step skipped text-warning" id="step-41"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-42"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-15"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-15-steps" aria-expanded="false" aria-controls="scenario-15-steps">My Scenario 15</div> <div class="panel-body collapse" id="scenario-15-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-43"> <h5>Given my step 43</h5> </li> <li class="step passed text-success" id="step-44"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-45"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-6"> <h3 class="text-success" data-toggle="collapse" href="#feature-6-scenarios" aria-expanded="false" aria-controls="feature-6-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-6-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-16"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-16-steps" aria-expanded="false" aria-controls="scenario-16-steps">My Scenario 16</div> <div class="panel-body collapse" id="scenario-16-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-46"> <h5>Given my step 46</h5> </li> <li class="step passed text-success" id="step-47"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-48"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-17"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-17-steps" aria-expanded="false" aria-controls="scenario-17-steps">My Scenario 17</div> <div class="panel-body collapse" id="scenario-17-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-49"> <h5>Given my step 49</h5> </li> <li class="step passed text-success" id="step-50"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-51"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-18"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-18-steps" aria-expanded="false" aria-controls="scenario-18-steps">My Scenario 18</div> <div class="panel-body collapse" id="scenario-18-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-52"> <h5>Given my step 52</h5> </li> <li class="step passed text-success" id="step-53"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-54"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-3"> <h2 class="text-danger" data-toggle="collapse" href="#area-3-features" aria-expanded="true" aria-controls="area-3-features">My Area 3</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-3-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">16</td> <td class="skipped warning text-center">10</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 59.2592592592593%"></td> <td class="skipped-bar bg-warning" style="width: 37.037037037037%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left: 2px solid #AD4D4B;" id="area-3-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #AD4D4B;" id="feature-7"> <h3 class="text-danger" data-toggle="collapse" href="#feature-7-scenarios" aria-expanded="true" aria-controls="feature-7-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 44.4444444444444%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse in" id="feature-7-scenarios" aria-expanded="true"> <li class="scenario failed" id="scenario-19"> <div class="panel panel-danger"> <div class="panel-heading" data-toggle="collapse" href="#scenario-19-steps" aria-expanded="true" aria-controls="scenario-19-steps">My Scenario 19 [Failed]</div> <div class="panel-body collapse in" id="scenario-19-steps" aria-expanded="true"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-55"> <h5>Given my step 55</h5> </li> <li class="step failed text-danger" id="step-56"> <h5>When my failed step 56 [Failed]</h5> <dl class="exception dl-horizontal"> <dt>Error Type</dt> <dd class="error-type">Exception</dd> <dt>Message</dt> <dd class="error-message"><pre>My Error</pre></dd> <dt>Stack</dt> <dd class="error-stack"><pre> at xBDD.Reporting.Test.Steps.HtmlReport.<>c.<OfAFullTestRunWithAllOutcomes>b__2_2(Step s2) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\test\xBDD.Reporting.Test\Steps\HtmlReport.cs:line 123 at xBDD.Core.StepExecutor.ExecuteStep(Step step) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\src\xBDD.Core\Core\StepExecutor.cs:line 44</pre></dd> </dl> </li> <li class="step skipped text-warning" id="step-57"> <h5>Then my step 3 [Skipped - Previous Error]</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-20"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-20-steps" aria-expanded="false" aria-controls="scenario-20-steps">My Scenario 20 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-20-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-58"> <h5>Given my step 58</h5> </li> <li class="step skipped text-warning" id="step-59"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-60"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-21"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-21-steps" aria-expanded="false" aria-controls="scenario-21-steps">My Scenario 21</div> <div class="panel-body collapse" id="scenario-21-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-61"> <h5>Given my step 61</h5> </li> <li class="step passed text-success" id="step-62"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-63"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-8"> <h3 class="text-warning" data-toggle="collapse" href="#feature-8-scenarios" aria-expanded="false" aria-controls="feature-8-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-8-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-22"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-22-steps" aria-expanded="false" aria-controls="scenario-22-steps">My Scenario 22 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-22-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-64"> <h5>Given my step 64</h5> </li> <li class="step skipped text-warning" id="step-65"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-66"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-23"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-23-steps" aria-expanded="false" aria-controls="scenario-23-steps">My Scenario 23 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-23-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-67"> <h5>Given my step 67</h5> </li> <li class="step skipped text-warning" id="step-68"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-69"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-24"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-24-steps" aria-expanded="false" aria-controls="scenario-24-steps">My Scenario 24</div> <div class="panel-body collapse" id="scenario-24-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-70"> <h5>Given my step 70</h5> </li> <li class="step passed text-success" id="step-71"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-72"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-9"> <h3 class="text-success" data-toggle="collapse" href="#feature-9-scenarios" aria-expanded="false" aria-controls="feature-9-scenarios">My Feature 9</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-9-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-25"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-25-steps" aria-expanded="false" aria-controls="scenario-25-steps">My Scenario 25</div> <div class="panel-body collapse" id="scenario-25-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-73"> <h5>Given my step 73</h5> </li> <li class="step passed text-success" id="step-74"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-75"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-26"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-26-steps" aria-expanded="false" aria-controls="scenario-26-steps">My Scenario 26</div> <div class="panel-body collapse" id="scenario-26-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-76"> <h5>Given my step 76</h5> </li> <li class="step passed text-success" id="step-77"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-78"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-27"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-27-steps" aria-expanded="false" aria-controls="scenario-27-steps">My Scenario 27</div> <div class="panel-body collapse" id="scenario-27-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-79"> <h5>Given my step 79</h5> </li> <li class="step passed text-success" id="step-80"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-81"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
4. And the passing, green bar should have a width of 44%
5. And the skipped, yellow bar should have a width of 44%
6. And the failed, red bar should have a width of 11%
7. And the total number of steps should show to the left of the outcome bar with a value of 9
8. And the number of passed steps should show to the left of the outcome bar with a value of 4
9. And the number of skipped steps should show to the left of the outcome bar with a value of 4
10. And the number of failed steps should show to the left of the outcome bar with a value of 1

View Scenario

Scenarios

Steps

Description [Skipped - Not Started]
Failing [Skipped - Not Started]
Name [Skipped - Not Started]
Passing
1. Given the test results of a passing full test run
2. When the user views the html report [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-success">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">4</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">8</td> <td class="passed success text-center">8</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">24</td> <td class="passed success text-center">24</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 1</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">4</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">12</td> <td class="passed success text-center">12</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">6</td> <td class="passed success text-center">6</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-2"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-2-steps" aria-expanded="false" aria-controls="scenario-2-steps">My Scenario 2</div> <div class="panel-body collapse" id="scenario-2-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-4"> <h5>Given my step 4</h5> </li> <li class="step passed text-success" id="step-5"> <h5>When my step 5</h5> </li> <li class="step passed text-success" id="step-6"> <h5>Then my step 6</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-2"> <h3 class="text-success" data-toggle="collapse" href="#feature-2-scenarios" aria-expanded="false" aria-controls="feature-2-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">6</td> <td class="passed success text-center">6</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-2-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-3"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-3-steps" aria-expanded="false" aria-controls="scenario-3-steps">My Scenario 3</div> <div class="panel-body collapse" id="scenario-3-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-7"> <h5>Given my step 7</h5> </li> <li class="step passed text-success" id="step-8"> <h5>When my step 8</h5> </li> <li class="step passed text-success" id="step-9"> <h5>Then my step 9</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-4"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-4-steps" aria-expanded="false" aria-controls="scenario-4-steps">My Scenario 4</div> <div class="panel-body collapse" id="scenario-4-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-10"> <h5>Given my step 10</h5> </li> <li class="step passed text-success" id="step-11"> <h5>When my step 11</h5> </li> <li class="step passed text-success" id="step-12"> <h5>Then my step 12</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-2"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-2-features" aria-expanded="false" aria-controls="area-2-features">My Area 2</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-2-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">4</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">12</td> <td class="passed success text-center">12</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-2-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-3"> <h3 class="text-success" data-toggle="collapse" href="#feature-3-scenarios" aria-expanded="false" aria-controls="feature-3-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">6</td> <td class="passed success text-center">6</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-3-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-5"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-5-steps" aria-expanded="false" aria-controls="scenario-5-steps">My Scenario 5</div> <div class="panel-body collapse" id="scenario-5-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-13"> <h5>Given my step 13</h5> </li> <li class="step passed text-success" id="step-14"> <h5>When my step 14</h5> </li> <li class="step passed text-success" id="step-15"> <h5>Then my step 15</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-6"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-6-steps" aria-expanded="false" aria-controls="scenario-6-steps">My Scenario 6</div> <div class="panel-body collapse" id="scenario-6-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-16"> <h5>Given my step 16</h5> </li> <li class="step passed text-success" id="step-17"> <h5>When my step 17</h5> </li> <li class="step passed text-success" id="step-18"> <h5>Then my step 18</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-4"> <h3 class="text-success" data-toggle="collapse" href="#feature-4-scenarios" aria-expanded="false" aria-controls="feature-4-scenarios">My Feature 4</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">6</td> <td class="passed success text-center">6</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-4-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-7"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-7-steps" aria-expanded="false" aria-controls="scenario-7-steps">My Scenario 7</div> <div class="panel-body collapse" id="scenario-7-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-19"> <h5>Given my step 19</h5> </li> <li class="step passed text-success" id="step-20"> <h5>When my step 20</h5> </li> <li class="step passed text-success" id="step-21"> <h5>Then my step 21</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-8"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-8-steps" aria-expanded="false" aria-controls="scenario-8-steps">My Scenario 8</div> <div class="panel-body collapse" id="scenario-8-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-22"> <h5>Given my step 22</h5> </li> <li class="step passed text-success" id="step-23"> <h5>When my step 23</h5> </li> <li class="step passed text-success" id="step-24"> <h5>Then my step 24</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
3. And the user expands the first area
4. And the user expands the first feature [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-success">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">4</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">8</td> <td class="passed success text-center">8</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">24</td> <td class="passed success text-center">24</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success" data-toggle="collapse" href="#area-1-features" aria-expanded="true" aria-controls="area-1-features">My Area 1</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">4</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">12</td> <td class="passed success text-center">12</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left-width: 2px; border-left-style: solid; border-left-color: rgb(90, 139, 91);" id="area-1-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="true" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">6</td> <td class="passed success text-center">6</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse in" id="feature-1-scenarios" aria-expanded="true" style=""> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-2"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-2-steps" aria-expanded="false" aria-controls="scenario-2-steps">My Scenario 2</div> <div class="panel-body collapse" id="scenario-2-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-4"> <h5>Given my step 4</h5> </li> <li class="step passed text-success" id="step-5"> <h5>When my step 5</h5> </li> <li class="step passed text-success" id="step-6"> <h5>Then my step 6</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-2"> <h3 class="text-success" data-toggle="collapse" href="#feature-2-scenarios" aria-expanded="false" aria-controls="feature-2-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">6</td> <td class="passed success text-center">6</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-2-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-3"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-3-steps" aria-expanded="false" aria-controls="scenario-3-steps">My Scenario 3</div> <div class="panel-body collapse" id="scenario-3-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-7"> <h5>Given my step 7</h5> </li> <li class="step passed text-success" id="step-8"> <h5>When my step 8</h5> </li> <li class="step passed text-success" id="step-9"> <h5>Then my step 9</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-4"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-4-steps" aria-expanded="false" aria-controls="scenario-4-steps">My Scenario 4</div> <div class="panel-body collapse" id="scenario-4-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-10"> <h5>Given my step 10</h5> </li> <li class="step passed text-success" id="step-11"> <h5>When my step 11</h5> </li> <li class="step passed text-success" id="step-12"> <h5>Then my step 12</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-2"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-2-features" aria-expanded="false" aria-controls="area-2-features">My Area 2</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-2-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">4</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">12</td> <td class="passed success text-center">12</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-2-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-3"> <h3 class="text-success" data-toggle="collapse" href="#feature-3-scenarios" aria-expanded="false" aria-controls="feature-3-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">6</td> <td class="passed success text-center">6</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-3-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-5"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-5-steps" aria-expanded="false" aria-controls="scenario-5-steps">My Scenario 5</div> <div class="panel-body collapse" id="scenario-5-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-13"> <h5>Given my step 13</h5> </li> <li class="step passed text-success" id="step-14"> <h5>When my step 14</h5> </li> <li class="step passed text-success" id="step-15"> <h5>Then my step 15</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-6"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-6-steps" aria-expanded="false" aria-controls="scenario-6-steps">My Scenario 6</div> <div class="panel-body collapse" id="scenario-6-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-16"> <h5>Given my step 16</h5> </li> <li class="step passed text-success" id="step-17"> <h5>When my step 17</h5> </li> <li class="step passed text-success" id="step-18"> <h5>Then my step 18</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-4"> <h3 class="text-success" data-toggle="collapse" href="#feature-4-scenarios" aria-expanded="false" aria-controls="feature-4-scenarios">My Feature 4</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">2</td> <td class="passed success text-center">2</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">6</td> <td class="passed success text-center">6</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-4-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-7"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-7-steps" aria-expanded="false" aria-controls="scenario-7-steps">My Scenario 7</div> <div class="panel-body collapse" id="scenario-7-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-19"> <h5>Given my step 19</h5> </li> <li class="step passed text-success" id="step-20"> <h5>When my step 20</h5> </li> <li class="step passed text-success" id="step-21"> <h5>Then my step 21</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-8"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-8-steps" aria-expanded="false" aria-controls="scenario-8-steps">My Scenario 8</div> <div class="panel-body collapse" id="scenario-8-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-22"> <h5>Given my step 22</h5> </li> <li class="step passed text-success" id="step-23"> <h5>When my step 23</h5> </li> <li class="step passed text-success" id="step-24"> <h5>Then my step 24</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
5. Then the report will show the scenario indented under the feature
6. And the scenario name will be green to indicate its passed
7. And the steps under the scenario will be collapsed
Skipped [Skipped - Not Started]

View Step

Scenarios

Steps

Failing [Skipped - Not Started]
Mulitple [Skipped - Not Started]
Passing [Skipped - Not Started]
Single [Skipped - Not Started]
Skipped [Skipped - Not Started]
With Exception
1. Given the test results with a feiled step with an exception
2. When the user views the html report [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-danger">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 100%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 100%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 100%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-danger" data-toggle="collapse" href="#area-1-features" aria-expanded="true" aria-controls="area-1-features">My Area 11</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 100%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 100%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left: 2px solid #AD4D4B;" id="area-1-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #AD4D4B;" id="feature-1"> <h3 class="text-danger" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="true" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 100%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse in" id="feature-1-scenarios" aria-expanded="true"> <li class="scenario failed" id="scenario-1"> <div class="panel panel-danger"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="true" aria-controls="scenario-1-steps">My Scenario 1 [Failed]</div> <div class="panel-body collapse in" id="scenario-1-steps" aria-expanded="true"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step failed text-danger" id="step-2"> <h5>When my step 2 [Failed]</h5> <dl class="exception dl-horizontal"> <dt>Error Type</dt> <dd class="error-type">Exception</dd> <dt>Message</dt> <dd class="error-message"><pre>My Error</pre></dd> <dt>Stack</dt> <dd class="error-stack"><pre> at xBDD.Reporting.Test.Steps.HtmlReport.<>c.<OfAFailingStepWithAnException>b__0_2(Step s2) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\test\xBDD.Reporting.Test\Steps\HtmlReport.cs:line 27 at xBDD.Core.StepExecutor.ExecuteStep(Step step) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\src\xBDD.Core\Core\StepExecutor.cs:line 44</pre></dd> </dl> </li> <li class="step skipped text-warning" id="step-3"> <h5>Then my step 3 [Skipped - Previous Error]</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
3. Then the user should see a section for the exception
4. And the section should display the exception type
5. And the section should display the exception message
6. And the section should display the exception stack trace
With Inner Exception
1. Given the test results with a feiled step with an exception
2. When the user views the html report [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-danger">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 100%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 100%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 100%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-danger" data-toggle="collapse" href="#area-1-features" aria-expanded="true" aria-controls="area-1-features">My Area 11</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 100%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 100%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left: 2px solid #AD4D4B;" id="area-1-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #AD4D4B;" id="feature-1"> <h3 class="text-danger" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="true" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 100%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse in" id="feature-1-scenarios" aria-expanded="true"> <li class="scenario failed" id="scenario-1"> <div class="panel panel-danger"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="true" aria-controls="scenario-1-steps">My Scenario 1 [Failed]</div> <div class="panel-body collapse in" id="scenario-1-steps" aria-expanded="true"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step failed text-danger" id="step-2"> <h5>When my step 2 [Failed]</h5> <dl class="exception dl-horizontal"> <dt>Error Type</dt> <dd class="error-type">Exception</dd> <dt>Message</dt> <dd class="error-message"><pre>My Error</pre></dd> <dt>Stack</dt> <dd class="error-stack"><pre> at xBDD.Reporting.Test.Steps.HtmlReport.<>c.<OfAFailingStepWithANestedException>b__3_2(Step s2) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\test\xBDD.Reporting.Test\Steps\HtmlReport.cs:line 166 at xBDD.Core.StepExecutor.ExecuteStep(Step step) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\src\xBDD.Core\Core\StepExecutor.cs:line 44</pre></dd> <dt>Inner Exception</dt> <dd class="inner-exception"> <dl class="exception dl-horizontal"> <dt>Error Type</dt> <dd class="error-type">Exception</dd> <dt>Message</dt> <dd class="error-message"><pre>My Nested Error</pre></dd> <dt>Stack</dt> <dd class="error-stack"><pre> at xBDD.Reporting.Test.Steps.HtmlReport.<>c.<OfAFailingStepWithANestedException>b__3_2(Step s2) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\test\xBDD.Reporting.Test\Steps\HtmlReport.cs:line 162</pre></dd> </dl> </dd> </dl> </li> <li class="step skipped text-warning" id="step-3"> <h5>Then my step 3 [Skipped - Previous Error]</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
3. Then the user should see a section for the nsted exception
4. And the section should display the exception type
5. And the section should display the exception message
6. And the section should display the exception stack trace

View Step Output

Scenarios

Steps

Code [Skipped - Not Started]
Collapsed By Default
1. Given the test results of a step with a/an text output of
  Here is my output!
2. When the user views the html report [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-success">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 1</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1 <a class="step-output-link" data-toggle="collapse" href="#step-1-output" aria-expanded="false" aria-controls="step-1-output">[Output]</a></h5> <div class="output collapse" id="step-1-output" aria-expanded="false"> <pre class="text" id="output-1">Here is my output!</pre> </div> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
3. And the user clicks the first area
4. And the user clicks the first feature
5. And the user clicks the first scenario
6. Then the report will show an [Output] link to the left of the step name [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-success">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success" data-toggle="collapse" href="#area-1-features" aria-expanded="true" aria-controls="area-1-features">My Area 1</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left-width: 2px; border-left-style: solid; border-left-color: rgb(90, 139, 91);" id="area-1-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="true" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse in" id="feature-1-scenarios" aria-expanded="true" style=""> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="true" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse in" id="scenario-1-steps" aria-expanded="true" style=""> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1 <a class="step-output-link" data-toggle="collapse" href="#step-1-output" aria-expanded="false" aria-controls="step-1-output">[Output]</a></h5> <div class="output collapse" id="step-1-output" aria-expanded="false"> <pre class="text" id="output-1">Here is my output!</pre> </div> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
General Text
1. Given the test results of a step with a/an text output of
  Here is my output!
2. When the user views the html report [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-success">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 1</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1 <a class="step-output-link" data-toggle="collapse" href="#step-1-output" aria-expanded="false" aria-controls="step-1-output">[Output]</a></h5> <div class="output collapse" id="step-1-output" aria-expanded="false"> <pre class="text" id="output-1">Here is my output!</pre> </div> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
3. And the user clicks the first area
4. And the user clicks the first feature
5. And the user clicks the first scenario
6. And the user clicks the first steps [Output] link
7. Then the report will show the output indented under the step [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-success">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success" data-toggle="collapse" href="#area-1-features" aria-expanded="true" aria-controls="area-1-features">My Area 1</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left-width: 2px; border-left-style: solid; border-left-color: rgb(90, 139, 91);" id="area-1-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="true" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse in" id="feature-1-scenarios" aria-expanded="true" style=""> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="true" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse in" id="scenario-1-steps" aria-expanded="true" style=""> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1 <a class="step-output-link" data-toggle="collapse" href="#step-1-output" aria-expanded="true" aria-controls="step-1-output">[Output]</a></h5> <div class="output collapse in" id="step-1-output" aria-expanded="true" style=""> <pre class="text" id="output-1">Here is my output!</pre> </div> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
Html With Preview [Skipped - Not Started]

View Test Run

Scenarios

Steps

Empty Test Run
1. Given the test results of an empty test run
2. When the user views the html report [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-muted">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">0</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">0</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">0</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">0</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> </body></html>
3. Then the report will show the test run name at the top
4. And the report will show the test run name as the title for the page
5. And the report will show the test run name in gray to indicate no scenarios were run
Failing
1. Given the test results of a single feiled scenario
2. When the user views the html report [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-danger">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 100%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 100%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 100%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-danger" data-toggle="collapse" href="#area-1-features" aria-expanded="true" aria-controls="area-1-features">My Area 11</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 100%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 100%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left: 2px solid #AD4D4B;" id="area-1-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #AD4D4B;" id="feature-1"> <h3 class="text-danger" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="true" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 100%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse in" id="feature-1-scenarios" aria-expanded="true"> <li class="scenario failed" id="scenario-1"> <div class="panel panel-danger"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="true" aria-controls="scenario-1-steps">My Scenario 1 [Failed]</div> <div class="panel-body collapse in" id="scenario-1-steps" aria-expanded="true"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step failed text-danger" id="step-2"> <h5>When my step 2 [Failed]</h5> <dl class="exception dl-horizontal"> <dt>Error Type</dt> <dd class="error-type">Exception</dd> <dt>Message</dt> <dd class="error-message"><pre>My Error</pre></dd> <dt>Stack</dt> <dd class="error-stack"><pre> at xBDD.Reporting.Test.Steps.HtmlReport.<>c.<OfASingleFailedScenario>b__6_2(Step s2) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\test\xBDD.Reporting.Test\Steps\HtmlReport.cs:line 242 at xBDD.Core.StepExecutor.ExecuteStep(Step step) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\src\xBDD.Core\Core\StepExecutor.cs:line 44</pre></dd> </dl> </li> <li class="step skipped text-warning" id="step-3"> <h5>Then my step 3 [Skipped - Previous Error]</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
3. Then the report will show the test run name in red to indicate the test run passed
Passing Test Run
1. Given the test results of a single passing scenario
2. When the user views the html report [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-success">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 11</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
3. Then the report will show the test run name in green to indicate the test run passed
Passing With Some Skipped
1. Given the test results of a single skipped scenario
2. When the user views the html report [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-warning">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-warning" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 11</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #917545;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-1"> <h3 class="text-warning" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">1</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">3</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 100%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-1"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1 [Skipped - Not Started]</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step skipped text-warning" id="step-2"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
3. Then the report will show the test run name in yellow to indicate the test run passed

View Test Run Stats

Scenarios

Steps

All Failed [Skipped - Not Started]
All Passing [Skipped - Not Started]
All Skipped [Skipped - Not Started]
Failed Skipped And Passing Area Stats
1. Given the test results of a full test run with all outcomes
2. When the user views the html report [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-danger">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">27</td> <td class="passed success text-center">19</td> <td class="skipped warning text-center">7</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 70.3703703703704%"></td> <td class="skipped-bar bg-warning" style="width: 25.9259259259259%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">81</td> <td class="passed success text-center">58</td> <td class="skipped warning text-center">22</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 71.6049382716049%"></td> <td class="skipped-bar bg-warning" style="width: 27.1604938271605%"></td> <td class="failed-bar bg-danger" style="width: 1.23456790123457%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 1</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">27</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-2"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-2-steps" aria-expanded="false" aria-controls="scenario-2-steps">My Scenario 2</div> <div class="panel-body collapse" id="scenario-2-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-4"> <h5>Given my step 4</h5> </li> <li class="step passed text-success" id="step-5"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-6"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-3"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-3-steps" aria-expanded="false" aria-controls="scenario-3-steps">My Scenario 3</div> <div class="panel-body collapse" id="scenario-3-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-7"> <h5>Given my step 7</h5> </li> <li class="step passed text-success" id="step-8"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-9"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-2"> <h3 class="text-success" data-toggle="collapse" href="#feature-2-scenarios" aria-expanded="false" aria-controls="feature-2-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-2-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-4"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-4-steps" aria-expanded="false" aria-controls="scenario-4-steps">My Scenario 4</div> <div class="panel-body collapse" id="scenario-4-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-10"> <h5>Given my step 10</h5> </li> <li class="step passed text-success" id="step-11"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-12"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-5"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-5-steps" aria-expanded="false" aria-controls="scenario-5-steps">My Scenario 5</div> <div class="panel-body collapse" id="scenario-5-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-13"> <h5>Given my step 13</h5> </li> <li class="step passed text-success" id="step-14"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-15"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-6"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-6-steps" aria-expanded="false" aria-controls="scenario-6-steps">My Scenario 6</div> <div class="panel-body collapse" id="scenario-6-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-16"> <h5>Given my step 16</h5> </li> <li class="step passed text-success" id="step-17"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-18"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-3"> <h3 class="text-success" data-toggle="collapse" href="#feature-3-scenarios" aria-expanded="false" aria-controls="feature-3-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-3-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-7"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-7-steps" aria-expanded="false" aria-controls="scenario-7-steps">My Scenario 7</div> <div class="panel-body collapse" id="scenario-7-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-19"> <h5>Given my step 19</h5> </li> <li class="step passed text-success" id="step-20"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-21"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-8"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-8-steps" aria-expanded="false" aria-controls="scenario-8-steps">My Scenario 8</div> <div class="panel-body collapse" id="scenario-8-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-22"> <h5>Given my step 22</h5> </li> <li class="step passed text-success" id="step-23"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-24"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-9"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-9-steps" aria-expanded="false" aria-controls="scenario-9-steps">My Scenario 9</div> <div class="panel-body collapse" id="scenario-9-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-25"> <h5>Given my step 25</h5> </li> <li class="step passed text-success" id="step-26"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-27"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-2"> <h2 class="text-warning" data-toggle="collapse" href="#area-2-features" aria-expanded="false" aria-controls="area-2-features">My Area 2</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-2-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">15</td> <td class="skipped warning text-center">12</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #917545;" id="area-2-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-4"> <h3 class="text-warning" data-toggle="collapse" href="#feature-4-scenarios" aria-expanded="false" aria-controls="feature-4-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-4-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-10"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-10-steps" aria-expanded="false" aria-controls="scenario-10-steps">My Scenario 10 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-10-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-28"> <h5>Given my step 28</h5> </li> <li class="step skipped text-warning" id="step-29"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-30"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-11"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-11-steps" aria-expanded="false" aria-controls="scenario-11-steps">My Scenario 11 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-11-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-31"> <h5>Given my step 31</h5> </li> <li class="step skipped text-warning" id="step-32"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-33"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-12"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-12-steps" aria-expanded="false" aria-controls="scenario-12-steps">My Scenario 12</div> <div class="panel-body collapse" id="scenario-12-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-34"> <h5>Given my step 34</h5> </li> <li class="step passed text-success" id="step-35"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-36"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-5"> <h3 class="text-warning" data-toggle="collapse" href="#feature-5-scenarios" aria-expanded="false" aria-controls="feature-5-scenarios">My Feature 4</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-5-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-13"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-13-steps" aria-expanded="false" aria-controls="scenario-13-steps">My Scenario 13 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-13-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-37"> <h5>Given my step 37</h5> </li> <li class="step skipped text-warning" id="step-38"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-39"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-14"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-14-steps" aria-expanded="false" aria-controls="scenario-14-steps">My Scenario 14 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-14-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-40"> <h5>Given my step 40</h5> </li> <li class="step skipped text-warning" id="step-41"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-42"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-15"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-15-steps" aria-expanded="false" aria-controls="scenario-15-steps">My Scenario 15</div> <div class="panel-body collapse" id="scenario-15-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-43"> <h5>Given my step 43</h5> </li> <li class="step passed text-success" id="step-44"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-45"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-6"> <h3 class="text-success" data-toggle="collapse" href="#feature-6-scenarios" aria-expanded="false" aria-controls="feature-6-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-6-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-16"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-16-steps" aria-expanded="false" aria-controls="scenario-16-steps">My Scenario 16</div> <div class="panel-body collapse" id="scenario-16-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-46"> <h5>Given my step 46</h5> </li> <li class="step passed text-success" id="step-47"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-48"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-17"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-17-steps" aria-expanded="false" aria-controls="scenario-17-steps">My Scenario 17</div> <div class="panel-body collapse" id="scenario-17-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-49"> <h5>Given my step 49</h5> </li> <li class="step passed text-success" id="step-50"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-51"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-18"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-18-steps" aria-expanded="false" aria-controls="scenario-18-steps">My Scenario 18</div> <div class="panel-body collapse" id="scenario-18-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-52"> <h5>Given my step 52</h5> </li> <li class="step passed text-success" id="step-53"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-54"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-3"> <h2 class="text-danger" data-toggle="collapse" href="#area-3-features" aria-expanded="true" aria-controls="area-3-features">My Area 3</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-3-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">16</td> <td class="skipped warning text-center">10</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 59.2592592592593%"></td> <td class="skipped-bar bg-warning" style="width: 37.037037037037%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left: 2px solid #AD4D4B;" id="area-3-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #AD4D4B;" id="feature-7"> <h3 class="text-danger" data-toggle="collapse" href="#feature-7-scenarios" aria-expanded="true" aria-controls="feature-7-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 44.4444444444444%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse in" id="feature-7-scenarios" aria-expanded="true"> <li class="scenario failed" id="scenario-19"> <div class="panel panel-danger"> <div class="panel-heading" data-toggle="collapse" href="#scenario-19-steps" aria-expanded="true" aria-controls="scenario-19-steps">My Scenario 19 [Failed]</div> <div class="panel-body collapse in" id="scenario-19-steps" aria-expanded="true"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-55"> <h5>Given my step 55</h5> </li> <li class="step failed text-danger" id="step-56"> <h5>When my failed step 56 [Failed]</h5> <dl class="exception dl-horizontal"> <dt>Error Type</dt> <dd class="error-type">Exception</dd> <dt>Message</dt> <dd class="error-message"><pre>My Error</pre></dd> <dt>Stack</dt> <dd class="error-stack"><pre> at xBDD.Reporting.Test.Steps.HtmlReport.<>c.<OfAFullTestRunWithAllOutcomes>b__2_2(Step s2) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\test\xBDD.Reporting.Test\Steps\HtmlReport.cs:line 123 at xBDD.Core.StepExecutor.ExecuteStep(Step step) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\src\xBDD.Core\Core\StepExecutor.cs:line 44</pre></dd> </dl> </li> <li class="step skipped text-warning" id="step-57"> <h5>Then my step 3 [Skipped - Previous Error]</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-20"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-20-steps" aria-expanded="false" aria-controls="scenario-20-steps">My Scenario 20 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-20-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-58"> <h5>Given my step 58</h5> </li> <li class="step skipped text-warning" id="step-59"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-60"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-21"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-21-steps" aria-expanded="false" aria-controls="scenario-21-steps">My Scenario 21</div> <div class="panel-body collapse" id="scenario-21-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-61"> <h5>Given my step 61</h5> </li> <li class="step passed text-success" id="step-62"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-63"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-8"> <h3 class="text-warning" data-toggle="collapse" href="#feature-8-scenarios" aria-expanded="false" aria-controls="feature-8-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-8-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-22"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-22-steps" aria-expanded="false" aria-controls="scenario-22-steps">My Scenario 22 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-22-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-64"> <h5>Given my step 64</h5> </li> <li class="step skipped text-warning" id="step-65"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-66"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-23"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-23-steps" aria-expanded="false" aria-controls="scenario-23-steps">My Scenario 23 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-23-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-67"> <h5>Given my step 67</h5> </li> <li class="step skipped text-warning" id="step-68"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-69"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-24"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-24-steps" aria-expanded="false" aria-controls="scenario-24-steps">My Scenario 24</div> <div class="panel-body collapse" id="scenario-24-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-70"> <h5>Given my step 70</h5> </li> <li class="step passed text-success" id="step-71"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-72"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-9"> <h3 class="text-success" data-toggle="collapse" href="#feature-9-scenarios" aria-expanded="false" aria-controls="feature-9-scenarios">My Feature 9</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-9-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-25"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-25-steps" aria-expanded="false" aria-controls="scenario-25-steps">My Scenario 25</div> <div class="panel-body collapse" id="scenario-25-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-73"> <h5>Given my step 73</h5> </li> <li class="step passed text-success" id="step-74"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-75"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-26"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-26-steps" aria-expanded="false" aria-controls="scenario-26-steps">My Scenario 26</div> <div class="panel-body collapse" id="scenario-26-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-76"> <h5>Given my step 76</h5> </li> <li class="step passed text-success" id="step-77"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-78"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-27"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-27-steps" aria-expanded="false" aria-controls="scenario-27-steps">My Scenario 27</div> <div class="panel-body collapse" id="scenario-27-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-79"> <h5>Given my step 79</h5> </li> <li class="step passed text-success" id="step-80"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-81"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
3. Then there should be a green, yellow, and red bar for the passing, skipped, and failing areas under the test run name [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-danger">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">27</td> <td class="passed success text-center">19</td> <td class="skipped warning text-center">7</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 70.3703703703704%"></td> <td class="skipped-bar bg-warning" style="width: 25.9259259259259%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">81</td> <td class="passed success text-center">58</td> <td class="skipped warning text-center">22</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 71.6049382716049%"></td> <td class="skipped-bar bg-warning" style="width: 27.1604938271605%"></td> <td class="failed-bar bg-danger" style="width: 1.23456790123457%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 1</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">27</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-2"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-2-steps" aria-expanded="false" aria-controls="scenario-2-steps">My Scenario 2</div> <div class="panel-body collapse" id="scenario-2-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-4"> <h5>Given my step 4</h5> </li> <li class="step passed text-success" id="step-5"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-6"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-3"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-3-steps" aria-expanded="false" aria-controls="scenario-3-steps">My Scenario 3</div> <div class="panel-body collapse" id="scenario-3-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-7"> <h5>Given my step 7</h5> </li> <li class="step passed text-success" id="step-8"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-9"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-2"> <h3 class="text-success" data-toggle="collapse" href="#feature-2-scenarios" aria-expanded="false" aria-controls="feature-2-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-2-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-4"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-4-steps" aria-expanded="false" aria-controls="scenario-4-steps">My Scenario 4</div> <div class="panel-body collapse" id="scenario-4-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-10"> <h5>Given my step 10</h5> </li> <li class="step passed text-success" id="step-11"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-12"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-5"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-5-steps" aria-expanded="false" aria-controls="scenario-5-steps">My Scenario 5</div> <div class="panel-body collapse" id="scenario-5-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-13"> <h5>Given my step 13</h5> </li> <li class="step passed text-success" id="step-14"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-15"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-6"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-6-steps" aria-expanded="false" aria-controls="scenario-6-steps">My Scenario 6</div> <div class="panel-body collapse" id="scenario-6-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-16"> <h5>Given my step 16</h5> </li> <li class="step passed text-success" id="step-17"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-18"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-3"> <h3 class="text-success" data-toggle="collapse" href="#feature-3-scenarios" aria-expanded="false" aria-controls="feature-3-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-3-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-7"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-7-steps" aria-expanded="false" aria-controls="scenario-7-steps">My Scenario 7</div> <div class="panel-body collapse" id="scenario-7-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-19"> <h5>Given my step 19</h5> </li> <li class="step passed text-success" id="step-20"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-21"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-8"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-8-steps" aria-expanded="false" aria-controls="scenario-8-steps">My Scenario 8</div> <div class="panel-body collapse" id="scenario-8-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-22"> <h5>Given my step 22</h5> </li> <li class="step passed text-success" id="step-23"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-24"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-9"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-9-steps" aria-expanded="false" aria-controls="scenario-9-steps">My Scenario 9</div> <div class="panel-body collapse" id="scenario-9-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-25"> <h5>Given my step 25</h5> </li> <li class="step passed text-success" id="step-26"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-27"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-2"> <h2 class="text-warning" data-toggle="collapse" href="#area-2-features" aria-expanded="false" aria-controls="area-2-features">My Area 2</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-2-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">15</td> <td class="skipped warning text-center">12</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #917545;" id="area-2-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-4"> <h3 class="text-warning" data-toggle="collapse" href="#feature-4-scenarios" aria-expanded="false" aria-controls="feature-4-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-4-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-10"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-10-steps" aria-expanded="false" aria-controls="scenario-10-steps">My Scenario 10 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-10-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-28"> <h5>Given my step 28</h5> </li> <li class="step skipped text-warning" id="step-29"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-30"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-11"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-11-steps" aria-expanded="false" aria-controls="scenario-11-steps">My Scenario 11 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-11-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-31"> <h5>Given my step 31</h5> </li> <li class="step skipped text-warning" id="step-32"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-33"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-12"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-12-steps" aria-expanded="false" aria-controls="scenario-12-steps">My Scenario 12</div> <div class="panel-body collapse" id="scenario-12-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-34"> <h5>Given my step 34</h5> </li> <li class="step passed text-success" id="step-35"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-36"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-5"> <h3 class="text-warning" data-toggle="collapse" href="#feature-5-scenarios" aria-expanded="false" aria-controls="feature-5-scenarios">My Feature 4</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-5-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-13"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-13-steps" aria-expanded="false" aria-controls="scenario-13-steps">My Scenario 13 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-13-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-37"> <h5>Given my step 37</h5> </li> <li class="step skipped text-warning" id="step-38"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-39"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-14"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-14-steps" aria-expanded="false" aria-controls="scenario-14-steps">My Scenario 14 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-14-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-40"> <h5>Given my step 40</h5> </li> <li class="step skipped text-warning" id="step-41"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-42"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-15"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-15-steps" aria-expanded="false" aria-controls="scenario-15-steps">My Scenario 15</div> <div class="panel-body collapse" id="scenario-15-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-43"> <h5>Given my step 43</h5> </li> <li class="step passed text-success" id="step-44"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-45"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-6"> <h3 class="text-success" data-toggle="collapse" href="#feature-6-scenarios" aria-expanded="false" aria-controls="feature-6-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-6-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-16"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-16-steps" aria-expanded="false" aria-controls="scenario-16-steps">My Scenario 16</div> <div class="panel-body collapse" id="scenario-16-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-46"> <h5>Given my step 46</h5> </li> <li class="step passed text-success" id="step-47"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-48"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-17"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-17-steps" aria-expanded="false" aria-controls="scenario-17-steps">My Scenario 17</div> <div class="panel-body collapse" id="scenario-17-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-49"> <h5>Given my step 49</h5> </li> <li class="step passed text-success" id="step-50"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-51"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-18"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-18-steps" aria-expanded="false" aria-controls="scenario-18-steps">My Scenario 18</div> <div class="panel-body collapse" id="scenario-18-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-52"> <h5>Given my step 52</h5> </li> <li class="step passed text-success" id="step-53"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-54"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-3"> <h2 class="text-danger" data-toggle="collapse" href="#area-3-features" aria-expanded="true" aria-controls="area-3-features">My Area 3</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-3-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">16</td> <td class="skipped warning text-center">10</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 59.2592592592593%"></td> <td class="skipped-bar bg-warning" style="width: 37.037037037037%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left: 2px solid #AD4D4B;" id="area-3-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #AD4D4B;" id="feature-7"> <h3 class="text-danger" data-toggle="collapse" href="#feature-7-scenarios" aria-expanded="true" aria-controls="feature-7-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 44.4444444444444%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse in" id="feature-7-scenarios" aria-expanded="true"> <li class="scenario failed" id="scenario-19"> <div class="panel panel-danger"> <div class="panel-heading" data-toggle="collapse" href="#scenario-19-steps" aria-expanded="true" aria-controls="scenario-19-steps">My Scenario 19 [Failed]</div> <div class="panel-body collapse in" id="scenario-19-steps" aria-expanded="true"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-55"> <h5>Given my step 55</h5> </li> <li class="step failed text-danger" id="step-56"> <h5>When my failed step 56 [Failed]</h5> <dl class="exception dl-horizontal"> <dt>Error Type</dt> <dd class="error-type">Exception</dd> <dt>Message</dt> <dd class="error-message"><pre>My Error</pre></dd> <dt>Stack</dt> <dd class="error-stack"><pre> at xBDD.Reporting.Test.Steps.HtmlReport.<>c.<OfAFullTestRunWithAllOutcomes>b__2_2(Step s2) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\test\xBDD.Reporting.Test\Steps\HtmlReport.cs:line 123 at xBDD.Core.StepExecutor.ExecuteStep(Step step) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\src\xBDD.Core\Core\StepExecutor.cs:line 44</pre></dd> </dl> </li> <li class="step skipped text-warning" id="step-57"> <h5>Then my step 3 [Skipped - Previous Error]</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-20"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-20-steps" aria-expanded="false" aria-controls="scenario-20-steps">My Scenario 20 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-20-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-58"> <h5>Given my step 58</h5> </li> <li class="step skipped text-warning" id="step-59"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-60"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-21"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-21-steps" aria-expanded="false" aria-controls="scenario-21-steps">My Scenario 21</div> <div class="panel-body collapse" id="scenario-21-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-61"> <h5>Given my step 61</h5> </li> <li class="step passed text-success" id="step-62"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-63"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-8"> <h3 class="text-warning" data-toggle="collapse" href="#feature-8-scenarios" aria-expanded="false" aria-controls="feature-8-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-8-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-22"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-22-steps" aria-expanded="false" aria-controls="scenario-22-steps">My Scenario 22 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-22-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-64"> <h5>Given my step 64</h5> </li> <li class="step skipped text-warning" id="step-65"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-66"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-23"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-23-steps" aria-expanded="false" aria-controls="scenario-23-steps">My Scenario 23 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-23-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-67"> <h5>Given my step 67</h5> </li> <li class="step skipped text-warning" id="step-68"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-69"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-24"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-24-steps" aria-expanded="false" aria-controls="scenario-24-steps">My Scenario 24</div> <div class="panel-body collapse" id="scenario-24-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-70"> <h5>Given my step 70</h5> </li> <li class="step passed text-success" id="step-71"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-72"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-9"> <h3 class="text-success" data-toggle="collapse" href="#feature-9-scenarios" aria-expanded="false" aria-controls="feature-9-scenarios">My Feature 9</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-9-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-25"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-25-steps" aria-expanded="false" aria-controls="scenario-25-steps">My Scenario 25</div> <div class="panel-body collapse" id="scenario-25-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-73"> <h5>Given my step 73</h5> </li> <li class="step passed text-success" id="step-74"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-75"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-26"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-26-steps" aria-expanded="false" aria-controls="scenario-26-steps">My Scenario 26</div> <div class="panel-body collapse" id="scenario-26-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-76"> <h5>Given my step 76</h5> </li> <li class="step passed text-success" id="step-77"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-78"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-27"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-27-steps" aria-expanded="false" aria-controls="scenario-27-steps">My Scenario 27</div> <div class="panel-body collapse" id="scenario-27-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-79"> <h5>Given my step 79</h5> </li> <li class="step passed text-success" id="step-80"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-81"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
4. And the passing, green bar should have a width of 33%
5. And the skipped, yellow bar should have a width of 33%
6. And the failed, red bar should have a width of 33%
7. And the total number of areas should show to the left of the outcome bar with a value of 3
8. And the number of passed areas should show to the left of the outcome bar with a value of 1
9. And the number of skipped areas should show to the left of the outcome bar with a value of 1
10. And the number of failed areas should show to the left of the outcome bar with a value of 1
Failed Skipped And Passing Feature Stats
1. Given the test results of a full test run with all outcomes
2. When the user views the html report [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-danger">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">27</td> <td class="passed success text-center">19</td> <td class="skipped warning text-center">7</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 70.3703703703704%"></td> <td class="skipped-bar bg-warning" style="width: 25.9259259259259%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">81</td> <td class="passed success text-center">58</td> <td class="skipped warning text-center">22</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 71.6049382716049%"></td> <td class="skipped-bar bg-warning" style="width: 27.1604938271605%"></td> <td class="failed-bar bg-danger" style="width: 1.23456790123457%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 1</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">27</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-2"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-2-steps" aria-expanded="false" aria-controls="scenario-2-steps">My Scenario 2</div> <div class="panel-body collapse" id="scenario-2-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-4"> <h5>Given my step 4</h5> </li> <li class="step passed text-success" id="step-5"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-6"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-3"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-3-steps" aria-expanded="false" aria-controls="scenario-3-steps">My Scenario 3</div> <div class="panel-body collapse" id="scenario-3-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-7"> <h5>Given my step 7</h5> </li> <li class="step passed text-success" id="step-8"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-9"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-2"> <h3 class="text-success" data-toggle="collapse" href="#feature-2-scenarios" aria-expanded="false" aria-controls="feature-2-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-2-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-4"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-4-steps" aria-expanded="false" aria-controls="scenario-4-steps">My Scenario 4</div> <div class="panel-body collapse" id="scenario-4-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-10"> <h5>Given my step 10</h5> </li> <li class="step passed text-success" id="step-11"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-12"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-5"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-5-steps" aria-expanded="false" aria-controls="scenario-5-steps">My Scenario 5</div> <div class="panel-body collapse" id="scenario-5-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-13"> <h5>Given my step 13</h5> </li> <li class="step passed text-success" id="step-14"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-15"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-6"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-6-steps" aria-expanded="false" aria-controls="scenario-6-steps">My Scenario 6</div> <div class="panel-body collapse" id="scenario-6-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-16"> <h5>Given my step 16</h5> </li> <li class="step passed text-success" id="step-17"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-18"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-3"> <h3 class="text-success" data-toggle="collapse" href="#feature-3-scenarios" aria-expanded="false" aria-controls="feature-3-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-3-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-7"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-7-steps" aria-expanded="false" aria-controls="scenario-7-steps">My Scenario 7</div> <div class="panel-body collapse" id="scenario-7-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-19"> <h5>Given my step 19</h5> </li> <li class="step passed text-success" id="step-20"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-21"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-8"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-8-steps" aria-expanded="false" aria-controls="scenario-8-steps">My Scenario 8</div> <div class="panel-body collapse" id="scenario-8-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-22"> <h5>Given my step 22</h5> </li> <li class="step passed text-success" id="step-23"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-24"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-9"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-9-steps" aria-expanded="false" aria-controls="scenario-9-steps">My Scenario 9</div> <div class="panel-body collapse" id="scenario-9-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-25"> <h5>Given my step 25</h5> </li> <li class="step passed text-success" id="step-26"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-27"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-2"> <h2 class="text-warning" data-toggle="collapse" href="#area-2-features" aria-expanded="false" aria-controls="area-2-features">My Area 2</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-2-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">15</td> <td class="skipped warning text-center">12</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #917545;" id="area-2-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-4"> <h3 class="text-warning" data-toggle="collapse" href="#feature-4-scenarios" aria-expanded="false" aria-controls="feature-4-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-4-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-10"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-10-steps" aria-expanded="false" aria-controls="scenario-10-steps">My Scenario 10 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-10-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-28"> <h5>Given my step 28</h5> </li> <li class="step skipped text-warning" id="step-29"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-30"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-11"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-11-steps" aria-expanded="false" aria-controls="scenario-11-steps">My Scenario 11 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-11-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-31"> <h5>Given my step 31</h5> </li> <li class="step skipped text-warning" id="step-32"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-33"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-12"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-12-steps" aria-expanded="false" aria-controls="scenario-12-steps">My Scenario 12</div> <div class="panel-body collapse" id="scenario-12-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-34"> <h5>Given my step 34</h5> </li> <li class="step passed text-success" id="step-35"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-36"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-5"> <h3 class="text-warning" data-toggle="collapse" href="#feature-5-scenarios" aria-expanded="false" aria-controls="feature-5-scenarios">My Feature 4</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-5-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-13"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-13-steps" aria-expanded="false" aria-controls="scenario-13-steps">My Scenario 13 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-13-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-37"> <h5>Given my step 37</h5> </li> <li class="step skipped text-warning" id="step-38"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-39"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-14"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-14-steps" aria-expanded="false" aria-controls="scenario-14-steps">My Scenario 14 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-14-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-40"> <h5>Given my step 40</h5> </li> <li class="step skipped text-warning" id="step-41"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-42"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-15"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-15-steps" aria-expanded="false" aria-controls="scenario-15-steps">My Scenario 15</div> <div class="panel-body collapse" id="scenario-15-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-43"> <h5>Given my step 43</h5> </li> <li class="step passed text-success" id="step-44"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-45"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-6"> <h3 class="text-success" data-toggle="collapse" href="#feature-6-scenarios" aria-expanded="false" aria-controls="feature-6-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-6-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-16"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-16-steps" aria-expanded="false" aria-controls="scenario-16-steps">My Scenario 16</div> <div class="panel-body collapse" id="scenario-16-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-46"> <h5>Given my step 46</h5> </li> <li class="step passed text-success" id="step-47"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-48"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-17"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-17-steps" aria-expanded="false" aria-controls="scenario-17-steps">My Scenario 17</div> <div class="panel-body collapse" id="scenario-17-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-49"> <h5>Given my step 49</h5> </li> <li class="step passed text-success" id="step-50"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-51"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-18"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-18-steps" aria-expanded="false" aria-controls="scenario-18-steps">My Scenario 18</div> <div class="panel-body collapse" id="scenario-18-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-52"> <h5>Given my step 52</h5> </li> <li class="step passed text-success" id="step-53"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-54"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-3"> <h2 class="text-danger" data-toggle="collapse" href="#area-3-features" aria-expanded="true" aria-controls="area-3-features">My Area 3</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-3-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">16</td> <td class="skipped warning text-center">10</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 59.2592592592593%"></td> <td class="skipped-bar bg-warning" style="width: 37.037037037037%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left: 2px solid #AD4D4B;" id="area-3-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #AD4D4B;" id="feature-7"> <h3 class="text-danger" data-toggle="collapse" href="#feature-7-scenarios" aria-expanded="true" aria-controls="feature-7-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 44.4444444444444%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse in" id="feature-7-scenarios" aria-expanded="true"> <li class="scenario failed" id="scenario-19"> <div class="panel panel-danger"> <div class="panel-heading" data-toggle="collapse" href="#scenario-19-steps" aria-expanded="true" aria-controls="scenario-19-steps">My Scenario 19 [Failed]</div> <div class="panel-body collapse in" id="scenario-19-steps" aria-expanded="true"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-55"> <h5>Given my step 55</h5> </li> <li class="step failed text-danger" id="step-56"> <h5>When my failed step 56 [Failed]</h5> <dl class="exception dl-horizontal"> <dt>Error Type</dt> <dd class="error-type">Exception</dd> <dt>Message</dt> <dd class="error-message"><pre>My Error</pre></dd> <dt>Stack</dt> <dd class="error-stack"><pre> at xBDD.Reporting.Test.Steps.HtmlReport.<>c.<OfAFullTestRunWithAllOutcomes>b__2_2(Step s2) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\test\xBDD.Reporting.Test\Steps\HtmlReport.cs:line 123 at xBDD.Core.StepExecutor.ExecuteStep(Step step) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\src\xBDD.Core\Core\StepExecutor.cs:line 44</pre></dd> </dl> </li> <li class="step skipped text-warning" id="step-57"> <h5>Then my step 3 [Skipped - Previous Error]</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-20"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-20-steps" aria-expanded="false" aria-controls="scenario-20-steps">My Scenario 20 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-20-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-58"> <h5>Given my step 58</h5> </li> <li class="step skipped text-warning" id="step-59"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-60"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-21"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-21-steps" aria-expanded="false" aria-controls="scenario-21-steps">My Scenario 21</div> <div class="panel-body collapse" id="scenario-21-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-61"> <h5>Given my step 61</h5> </li> <li class="step passed text-success" id="step-62"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-63"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-8"> <h3 class="text-warning" data-toggle="collapse" href="#feature-8-scenarios" aria-expanded="false" aria-controls="feature-8-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-8-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-22"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-22-steps" aria-expanded="false" aria-controls="scenario-22-steps">My Scenario 22 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-22-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-64"> <h5>Given my step 64</h5> </li> <li class="step skipped text-warning" id="step-65"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-66"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-23"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-23-steps" aria-expanded="false" aria-controls="scenario-23-steps">My Scenario 23 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-23-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-67"> <h5>Given my step 67</h5> </li> <li class="step skipped text-warning" id="step-68"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-69"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-24"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-24-steps" aria-expanded="false" aria-controls="scenario-24-steps">My Scenario 24</div> <div class="panel-body collapse" id="scenario-24-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-70"> <h5>Given my step 70</h5> </li> <li class="step passed text-success" id="step-71"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-72"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-9"> <h3 class="text-success" data-toggle="collapse" href="#feature-9-scenarios" aria-expanded="false" aria-controls="feature-9-scenarios">My Feature 9</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-9-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-25"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-25-steps" aria-expanded="false" aria-controls="scenario-25-steps">My Scenario 25</div> <div class="panel-body collapse" id="scenario-25-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-73"> <h5>Given my step 73</h5> </li> <li class="step passed text-success" id="step-74"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-75"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-26"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-26-steps" aria-expanded="false" aria-controls="scenario-26-steps">My Scenario 26</div> <div class="panel-body collapse" id="scenario-26-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-76"> <h5>Given my step 76</h5> </li> <li class="step passed text-success" id="step-77"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-78"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-27"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-27-steps" aria-expanded="false" aria-controls="scenario-27-steps">My Scenario 27</div> <div class="panel-body collapse" id="scenario-27-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-79"> <h5>Given my step 79</h5> </li> <li class="step passed text-success" id="step-80"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-81"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
3. Then there should be a green, yellow, and red bar for the passing, skipped, and failing features under the test run name [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-danger">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">27</td> <td class="passed success text-center">19</td> <td class="skipped warning text-center">7</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 70.3703703703704%"></td> <td class="skipped-bar bg-warning" style="width: 25.9259259259259%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">81</td> <td class="passed success text-center">58</td> <td class="skipped warning text-center">22</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 71.6049382716049%"></td> <td class="skipped-bar bg-warning" style="width: 27.1604938271605%"></td> <td class="failed-bar bg-danger" style="width: 1.23456790123457%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 1</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">27</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-2"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-2-steps" aria-expanded="false" aria-controls="scenario-2-steps">My Scenario 2</div> <div class="panel-body collapse" id="scenario-2-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-4"> <h5>Given my step 4</h5> </li> <li class="step passed text-success" id="step-5"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-6"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-3"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-3-steps" aria-expanded="false" aria-controls="scenario-3-steps">My Scenario 3</div> <div class="panel-body collapse" id="scenario-3-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-7"> <h5>Given my step 7</h5> </li> <li class="step passed text-success" id="step-8"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-9"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-2"> <h3 class="text-success" data-toggle="collapse" href="#feature-2-scenarios" aria-expanded="false" aria-controls="feature-2-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-2-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-4"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-4-steps" aria-expanded="false" aria-controls="scenario-4-steps">My Scenario 4</div> <div class="panel-body collapse" id="scenario-4-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-10"> <h5>Given my step 10</h5> </li> <li class="step passed text-success" id="step-11"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-12"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-5"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-5-steps" aria-expanded="false" aria-controls="scenario-5-steps">My Scenario 5</div> <div class="panel-body collapse" id="scenario-5-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-13"> <h5>Given my step 13</h5> </li> <li class="step passed text-success" id="step-14"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-15"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-6"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-6-steps" aria-expanded="false" aria-controls="scenario-6-steps">My Scenario 6</div> <div class="panel-body collapse" id="scenario-6-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-16"> <h5>Given my step 16</h5> </li> <li class="step passed text-success" id="step-17"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-18"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-3"> <h3 class="text-success" data-toggle="collapse" href="#feature-3-scenarios" aria-expanded="false" aria-controls="feature-3-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-3-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-7"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-7-steps" aria-expanded="false" aria-controls="scenario-7-steps">My Scenario 7</div> <div class="panel-body collapse" id="scenario-7-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-19"> <h5>Given my step 19</h5> </li> <li class="step passed text-success" id="step-20"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-21"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-8"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-8-steps" aria-expanded="false" aria-controls="scenario-8-steps">My Scenario 8</div> <div class="panel-body collapse" id="scenario-8-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-22"> <h5>Given my step 22</h5> </li> <li class="step passed text-success" id="step-23"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-24"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-9"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-9-steps" aria-expanded="false" aria-controls="scenario-9-steps">My Scenario 9</div> <div class="panel-body collapse" id="scenario-9-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-25"> <h5>Given my step 25</h5> </li> <li class="step passed text-success" id="step-26"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-27"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-2"> <h2 class="text-warning" data-toggle="collapse" href="#area-2-features" aria-expanded="false" aria-controls="area-2-features">My Area 2</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-2-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">15</td> <td class="skipped warning text-center">12</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #917545;" id="area-2-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-4"> <h3 class="text-warning" data-toggle="collapse" href="#feature-4-scenarios" aria-expanded="false" aria-controls="feature-4-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-4-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-10"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-10-steps" aria-expanded="false" aria-controls="scenario-10-steps">My Scenario 10 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-10-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-28"> <h5>Given my step 28</h5> </li> <li class="step skipped text-warning" id="step-29"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-30"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-11"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-11-steps" aria-expanded="false" aria-controls="scenario-11-steps">My Scenario 11 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-11-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-31"> <h5>Given my step 31</h5> </li> <li class="step skipped text-warning" id="step-32"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-33"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-12"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-12-steps" aria-expanded="false" aria-controls="scenario-12-steps">My Scenario 12</div> <div class="panel-body collapse" id="scenario-12-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-34"> <h5>Given my step 34</h5> </li> <li class="step passed text-success" id="step-35"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-36"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-5"> <h3 class="text-warning" data-toggle="collapse" href="#feature-5-scenarios" aria-expanded="false" aria-controls="feature-5-scenarios">My Feature 4</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-5-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-13"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-13-steps" aria-expanded="false" aria-controls="scenario-13-steps">My Scenario 13 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-13-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-37"> <h5>Given my step 37</h5> </li> <li class="step skipped text-warning" id="step-38"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-39"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-14"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-14-steps" aria-expanded="false" aria-controls="scenario-14-steps">My Scenario 14 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-14-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-40"> <h5>Given my step 40</h5> </li> <li class="step skipped text-warning" id="step-41"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-42"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-15"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-15-steps" aria-expanded="false" aria-controls="scenario-15-steps">My Scenario 15</div> <div class="panel-body collapse" id="scenario-15-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-43"> <h5>Given my step 43</h5> </li> <li class="step passed text-success" id="step-44"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-45"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-6"> <h3 class="text-success" data-toggle="collapse" href="#feature-6-scenarios" aria-expanded="false" aria-controls="feature-6-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-6-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-16"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-16-steps" aria-expanded="false" aria-controls="scenario-16-steps">My Scenario 16</div> <div class="panel-body collapse" id="scenario-16-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-46"> <h5>Given my step 46</h5> </li> <li class="step passed text-success" id="step-47"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-48"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-17"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-17-steps" aria-expanded="false" aria-controls="scenario-17-steps">My Scenario 17</div> <div class="panel-body collapse" id="scenario-17-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-49"> <h5>Given my step 49</h5> </li> <li class="step passed text-success" id="step-50"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-51"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-18"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-18-steps" aria-expanded="false" aria-controls="scenario-18-steps">My Scenario 18</div> <div class="panel-body collapse" id="scenario-18-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-52"> <h5>Given my step 52</h5> </li> <li class="step passed text-success" id="step-53"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-54"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-3"> <h2 class="text-danger" data-toggle="collapse" href="#area-3-features" aria-expanded="true" aria-controls="area-3-features">My Area 3</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-3-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">16</td> <td class="skipped warning text-center">10</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 59.2592592592593%"></td> <td class="skipped-bar bg-warning" style="width: 37.037037037037%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left: 2px solid #AD4D4B;" id="area-3-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #AD4D4B;" id="feature-7"> <h3 class="text-danger" data-toggle="collapse" href="#feature-7-scenarios" aria-expanded="true" aria-controls="feature-7-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 44.4444444444444%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse in" id="feature-7-scenarios" aria-expanded="true"> <li class="scenario failed" id="scenario-19"> <div class="panel panel-danger"> <div class="panel-heading" data-toggle="collapse" href="#scenario-19-steps" aria-expanded="true" aria-controls="scenario-19-steps">My Scenario 19 [Failed]</div> <div class="panel-body collapse in" id="scenario-19-steps" aria-expanded="true"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-55"> <h5>Given my step 55</h5> </li> <li class="step failed text-danger" id="step-56"> <h5>When my failed step 56 [Failed]</h5> <dl class="exception dl-horizontal"> <dt>Error Type</dt> <dd class="error-type">Exception</dd> <dt>Message</dt> <dd class="error-message"><pre>My Error</pre></dd> <dt>Stack</dt> <dd class="error-stack"><pre> at xBDD.Reporting.Test.Steps.HtmlReport.<>c.<OfAFullTestRunWithAllOutcomes>b__2_2(Step s2) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\test\xBDD.Reporting.Test\Steps\HtmlReport.cs:line 123 at xBDD.Core.StepExecutor.ExecuteStep(Step step) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\src\xBDD.Core\Core\StepExecutor.cs:line 44</pre></dd> </dl> </li> <li class="step skipped text-warning" id="step-57"> <h5>Then my step 3 [Skipped - Previous Error]</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-20"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-20-steps" aria-expanded="false" aria-controls="scenario-20-steps">My Scenario 20 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-20-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-58"> <h5>Given my step 58</h5> </li> <li class="step skipped text-warning" id="step-59"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-60"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-21"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-21-steps" aria-expanded="false" aria-controls="scenario-21-steps">My Scenario 21</div> <div class="panel-body collapse" id="scenario-21-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-61"> <h5>Given my step 61</h5> </li> <li class="step passed text-success" id="step-62"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-63"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-8"> <h3 class="text-warning" data-toggle="collapse" href="#feature-8-scenarios" aria-expanded="false" aria-controls="feature-8-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-8-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-22"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-22-steps" aria-expanded="false" aria-controls="scenario-22-steps">My Scenario 22 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-22-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-64"> <h5>Given my step 64</h5> </li> <li class="step skipped text-warning" id="step-65"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-66"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-23"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-23-steps" aria-expanded="false" aria-controls="scenario-23-steps">My Scenario 23 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-23-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-67"> <h5>Given my step 67</h5> </li> <li class="step skipped text-warning" id="step-68"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-69"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-24"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-24-steps" aria-expanded="false" aria-controls="scenario-24-steps">My Scenario 24</div> <div class="panel-body collapse" id="scenario-24-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-70"> <h5>Given my step 70</h5> </li> <li class="step passed text-success" id="step-71"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-72"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-9"> <h3 class="text-success" data-toggle="collapse" href="#feature-9-scenarios" aria-expanded="false" aria-controls="feature-9-scenarios">My Feature 9</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-9-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-25"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-25-steps" aria-expanded="false" aria-controls="scenario-25-steps">My Scenario 25</div> <div class="panel-body collapse" id="scenario-25-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-73"> <h5>Given my step 73</h5> </li> <li class="step passed text-success" id="step-74"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-75"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-26"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-26-steps" aria-expanded="false" aria-controls="scenario-26-steps">My Scenario 26</div> <div class="panel-body collapse" id="scenario-26-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-76"> <h5>Given my step 76</h5> </li> <li class="step passed text-success" id="step-77"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-78"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-27"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-27-steps" aria-expanded="false" aria-controls="scenario-27-steps">My Scenario 27</div> <div class="panel-body collapse" id="scenario-27-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-79"> <h5>Given my step 79</h5> </li> <li class="step passed text-success" id="step-80"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-81"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
4. And the passing, green bar should have a width of 56%
5. And the skipped, yellow bar should have a width of 33%
6. And the failed, red bar should have a width of 11%
7. And the total number of areas should show to the left of the outcome bar with a value of 9
8. And the number of passed features should show to the left of the outcome bar with a value of 5
9. And the number of skipped features should show to the left of the outcome bar with a value of 3
10. And the number of failed features should show to the left of the outcome bar with a value of 1
Failed Skipped And Passing Scenario Stats
1. Given the test results of a full test run with all outcomes
2. When the user views the html report [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-danger">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">27</td> <td class="passed success text-center">19</td> <td class="skipped warning text-center">7</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 70.3703703703704%"></td> <td class="skipped-bar bg-warning" style="width: 25.9259259259259%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">81</td> <td class="passed success text-center">58</td> <td class="skipped warning text-center">22</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 71.6049382716049%"></td> <td class="skipped-bar bg-warning" style="width: 27.1604938271605%"></td> <td class="failed-bar bg-danger" style="width: 1.23456790123457%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 1</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">27</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-2"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-2-steps" aria-expanded="false" aria-controls="scenario-2-steps">My Scenario 2</div> <div class="panel-body collapse" id="scenario-2-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-4"> <h5>Given my step 4</h5> </li> <li class="step passed text-success" id="step-5"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-6"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-3"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-3-steps" aria-expanded="false" aria-controls="scenario-3-steps">My Scenario 3</div> <div class="panel-body collapse" id="scenario-3-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-7"> <h5>Given my step 7</h5> </li> <li class="step passed text-success" id="step-8"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-9"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-2"> <h3 class="text-success" data-toggle="collapse" href="#feature-2-scenarios" aria-expanded="false" aria-controls="feature-2-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-2-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-4"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-4-steps" aria-expanded="false" aria-controls="scenario-4-steps">My Scenario 4</div> <div class="panel-body collapse" id="scenario-4-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-10"> <h5>Given my step 10</h5> </li> <li class="step passed text-success" id="step-11"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-12"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-5"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-5-steps" aria-expanded="false" aria-controls="scenario-5-steps">My Scenario 5</div> <div class="panel-body collapse" id="scenario-5-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-13"> <h5>Given my step 13</h5> </li> <li class="step passed text-success" id="step-14"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-15"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-6"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-6-steps" aria-expanded="false" aria-controls="scenario-6-steps">My Scenario 6</div> <div class="panel-body collapse" id="scenario-6-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-16"> <h5>Given my step 16</h5> </li> <li class="step passed text-success" id="step-17"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-18"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-3"> <h3 class="text-success" data-toggle="collapse" href="#feature-3-scenarios" aria-expanded="false" aria-controls="feature-3-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-3-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-7"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-7-steps" aria-expanded="false" aria-controls="scenario-7-steps">My Scenario 7</div> <div class="panel-body collapse" id="scenario-7-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-19"> <h5>Given my step 19</h5> </li> <li class="step passed text-success" id="step-20"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-21"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-8"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-8-steps" aria-expanded="false" aria-controls="scenario-8-steps">My Scenario 8</div> <div class="panel-body collapse" id="scenario-8-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-22"> <h5>Given my step 22</h5> </li> <li class="step passed text-success" id="step-23"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-24"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-9"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-9-steps" aria-expanded="false" aria-controls="scenario-9-steps">My Scenario 9</div> <div class="panel-body collapse" id="scenario-9-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-25"> <h5>Given my step 25</h5> </li> <li class="step passed text-success" id="step-26"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-27"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-2"> <h2 class="text-warning" data-toggle="collapse" href="#area-2-features" aria-expanded="false" aria-controls="area-2-features">My Area 2</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-2-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">15</td> <td class="skipped warning text-center">12</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #917545;" id="area-2-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-4"> <h3 class="text-warning" data-toggle="collapse" href="#feature-4-scenarios" aria-expanded="false" aria-controls="feature-4-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-4-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-10"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-10-steps" aria-expanded="false" aria-controls="scenario-10-steps">My Scenario 10 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-10-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-28"> <h5>Given my step 28</h5> </li> <li class="step skipped text-warning" id="step-29"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-30"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-11"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-11-steps" aria-expanded="false" aria-controls="scenario-11-steps">My Scenario 11 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-11-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-31"> <h5>Given my step 31</h5> </li> <li class="step skipped text-warning" id="step-32"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-33"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-12"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-12-steps" aria-expanded="false" aria-controls="scenario-12-steps">My Scenario 12</div> <div class="panel-body collapse" id="scenario-12-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-34"> <h5>Given my step 34</h5> </li> <li class="step passed text-success" id="step-35"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-36"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-5"> <h3 class="text-warning" data-toggle="collapse" href="#feature-5-scenarios" aria-expanded="false" aria-controls="feature-5-scenarios">My Feature 4</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-5-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-13"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-13-steps" aria-expanded="false" aria-controls="scenario-13-steps">My Scenario 13 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-13-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-37"> <h5>Given my step 37</h5> </li> <li class="step skipped text-warning" id="step-38"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-39"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-14"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-14-steps" aria-expanded="false" aria-controls="scenario-14-steps">My Scenario 14 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-14-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-40"> <h5>Given my step 40</h5> </li> <li class="step skipped text-warning" id="step-41"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-42"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-15"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-15-steps" aria-expanded="false" aria-controls="scenario-15-steps">My Scenario 15</div> <div class="panel-body collapse" id="scenario-15-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-43"> <h5>Given my step 43</h5> </li> <li class="step passed text-success" id="step-44"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-45"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-6"> <h3 class="text-success" data-toggle="collapse" href="#feature-6-scenarios" aria-expanded="false" aria-controls="feature-6-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-6-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-16"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-16-steps" aria-expanded="false" aria-controls="scenario-16-steps">My Scenario 16</div> <div class="panel-body collapse" id="scenario-16-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-46"> <h5>Given my step 46</h5> </li> <li class="step passed text-success" id="step-47"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-48"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-17"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-17-steps" aria-expanded="false" aria-controls="scenario-17-steps">My Scenario 17</div> <div class="panel-body collapse" id="scenario-17-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-49"> <h5>Given my step 49</h5> </li> <li class="step passed text-success" id="step-50"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-51"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-18"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-18-steps" aria-expanded="false" aria-controls="scenario-18-steps">My Scenario 18</div> <div class="panel-body collapse" id="scenario-18-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-52"> <h5>Given my step 52</h5> </li> <li class="step passed text-success" id="step-53"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-54"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-3"> <h2 class="text-danger" data-toggle="collapse" href="#area-3-features" aria-expanded="true" aria-controls="area-3-features">My Area 3</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-3-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">16</td> <td class="skipped warning text-center">10</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 59.2592592592593%"></td> <td class="skipped-bar bg-warning" style="width: 37.037037037037%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left: 2px solid #AD4D4B;" id="area-3-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #AD4D4B;" id="feature-7"> <h3 class="text-danger" data-toggle="collapse" href="#feature-7-scenarios" aria-expanded="true" aria-controls="feature-7-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 44.4444444444444%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse in" id="feature-7-scenarios" aria-expanded="true"> <li class="scenario failed" id="scenario-19"> <div class="panel panel-danger"> <div class="panel-heading" data-toggle="collapse" href="#scenario-19-steps" aria-expanded="true" aria-controls="scenario-19-steps">My Scenario 19 [Failed]</div> <div class="panel-body collapse in" id="scenario-19-steps" aria-expanded="true"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-55"> <h5>Given my step 55</h5> </li> <li class="step failed text-danger" id="step-56"> <h5>When my failed step 56 [Failed]</h5> <dl class="exception dl-horizontal"> <dt>Error Type</dt> <dd class="error-type">Exception</dd> <dt>Message</dt> <dd class="error-message"><pre>My Error</pre></dd> <dt>Stack</dt> <dd class="error-stack"><pre> at xBDD.Reporting.Test.Steps.HtmlReport.<>c.<OfAFullTestRunWithAllOutcomes>b__2_2(Step s2) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\test\xBDD.Reporting.Test\Steps\HtmlReport.cs:line 123 at xBDD.Core.StepExecutor.ExecuteStep(Step step) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\src\xBDD.Core\Core\StepExecutor.cs:line 44</pre></dd> </dl> </li> <li class="step skipped text-warning" id="step-57"> <h5>Then my step 3 [Skipped - Previous Error]</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-20"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-20-steps" aria-expanded="false" aria-controls="scenario-20-steps">My Scenario 20 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-20-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-58"> <h5>Given my step 58</h5> </li> <li class="step skipped text-warning" id="step-59"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-60"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-21"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-21-steps" aria-expanded="false" aria-controls="scenario-21-steps">My Scenario 21</div> <div class="panel-body collapse" id="scenario-21-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-61"> <h5>Given my step 61</h5> </li> <li class="step passed text-success" id="step-62"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-63"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-8"> <h3 class="text-warning" data-toggle="collapse" href="#feature-8-scenarios" aria-expanded="false" aria-controls="feature-8-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-8-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-22"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-22-steps" aria-expanded="false" aria-controls="scenario-22-steps">My Scenario 22 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-22-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-64"> <h5>Given my step 64</h5> </li> <li class="step skipped text-warning" id="step-65"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-66"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-23"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-23-steps" aria-expanded="false" aria-controls="scenario-23-steps">My Scenario 23 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-23-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-67"> <h5>Given my step 67</h5> </li> <li class="step skipped text-warning" id="step-68"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-69"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-24"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-24-steps" aria-expanded="false" aria-controls="scenario-24-steps">My Scenario 24</div> <div class="panel-body collapse" id="scenario-24-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-70"> <h5>Given my step 70</h5> </li> <li class="step passed text-success" id="step-71"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-72"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-9"> <h3 class="text-success" data-toggle="collapse" href="#feature-9-scenarios" aria-expanded="false" aria-controls="feature-9-scenarios">My Feature 9</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-9-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-25"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-25-steps" aria-expanded="false" aria-controls="scenario-25-steps">My Scenario 25</div> <div class="panel-body collapse" id="scenario-25-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-73"> <h5>Given my step 73</h5> </li> <li class="step passed text-success" id="step-74"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-75"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-26"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-26-steps" aria-expanded="false" aria-controls="scenario-26-steps">My Scenario 26</div> <div class="panel-body collapse" id="scenario-26-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-76"> <h5>Given my step 76</h5> </li> <li class="step passed text-success" id="step-77"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-78"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-27"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-27-steps" aria-expanded="false" aria-controls="scenario-27-steps">My Scenario 27</div> <div class="panel-body collapse" id="scenario-27-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-79"> <h5>Given my step 79</h5> </li> <li class="step passed text-success" id="step-80"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-81"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
3. Then there should be a green, yellow, and red bar for the passing, skipped, and failing scenarios under the test run name [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-danger">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">27</td> <td class="passed success text-center">19</td> <td class="skipped warning text-center">7</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 70.3703703703704%"></td> <td class="skipped-bar bg-warning" style="width: 25.9259259259259%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">81</td> <td class="passed success text-center">58</td> <td class="skipped warning text-center">22</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 71.6049382716049%"></td> <td class="skipped-bar bg-warning" style="width: 27.1604938271605%"></td> <td class="failed-bar bg-danger" style="width: 1.23456790123457%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 1</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">27</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-2"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-2-steps" aria-expanded="false" aria-controls="scenario-2-steps">My Scenario 2</div> <div class="panel-body collapse" id="scenario-2-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-4"> <h5>Given my step 4</h5> </li> <li class="step passed text-success" id="step-5"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-6"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-3"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-3-steps" aria-expanded="false" aria-controls="scenario-3-steps">My Scenario 3</div> <div class="panel-body collapse" id="scenario-3-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-7"> <h5>Given my step 7</h5> </li> <li class="step passed text-success" id="step-8"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-9"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-2"> <h3 class="text-success" data-toggle="collapse" href="#feature-2-scenarios" aria-expanded="false" aria-controls="feature-2-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-2-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-4"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-4-steps" aria-expanded="false" aria-controls="scenario-4-steps">My Scenario 4</div> <div class="panel-body collapse" id="scenario-4-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-10"> <h5>Given my step 10</h5> </li> <li class="step passed text-success" id="step-11"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-12"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-5"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-5-steps" aria-expanded="false" aria-controls="scenario-5-steps">My Scenario 5</div> <div class="panel-body collapse" id="scenario-5-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-13"> <h5>Given my step 13</h5> </li> <li class="step passed text-success" id="step-14"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-15"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-6"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-6-steps" aria-expanded="false" aria-controls="scenario-6-steps">My Scenario 6</div> <div class="panel-body collapse" id="scenario-6-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-16"> <h5>Given my step 16</h5> </li> <li class="step passed text-success" id="step-17"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-18"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-3"> <h3 class="text-success" data-toggle="collapse" href="#feature-3-scenarios" aria-expanded="false" aria-controls="feature-3-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-3-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-7"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-7-steps" aria-expanded="false" aria-controls="scenario-7-steps">My Scenario 7</div> <div class="panel-body collapse" id="scenario-7-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-19"> <h5>Given my step 19</h5> </li> <li class="step passed text-success" id="step-20"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-21"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-8"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-8-steps" aria-expanded="false" aria-controls="scenario-8-steps">My Scenario 8</div> <div class="panel-body collapse" id="scenario-8-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-22"> <h5>Given my step 22</h5> </li> <li class="step passed text-success" id="step-23"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-24"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-9"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-9-steps" aria-expanded="false" aria-controls="scenario-9-steps">My Scenario 9</div> <div class="panel-body collapse" id="scenario-9-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-25"> <h5>Given my step 25</h5> </li> <li class="step passed text-success" id="step-26"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-27"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-2"> <h2 class="text-warning" data-toggle="collapse" href="#area-2-features" aria-expanded="false" aria-controls="area-2-features">My Area 2</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-2-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">15</td> <td class="skipped warning text-center">12</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #917545;" id="area-2-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-4"> <h3 class="text-warning" data-toggle="collapse" href="#feature-4-scenarios" aria-expanded="false" aria-controls="feature-4-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-4-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-10"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-10-steps" aria-expanded="false" aria-controls="scenario-10-steps">My Scenario 10 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-10-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-28"> <h5>Given my step 28</h5> </li> <li class="step skipped text-warning" id="step-29"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-30"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-11"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-11-steps" aria-expanded="false" aria-controls="scenario-11-steps">My Scenario 11 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-11-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-31"> <h5>Given my step 31</h5> </li> <li class="step skipped text-warning" id="step-32"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-33"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-12"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-12-steps" aria-expanded="false" aria-controls="scenario-12-steps">My Scenario 12</div> <div class="panel-body collapse" id="scenario-12-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-34"> <h5>Given my step 34</h5> </li> <li class="step passed text-success" id="step-35"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-36"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-5"> <h3 class="text-warning" data-toggle="collapse" href="#feature-5-scenarios" aria-expanded="false" aria-controls="feature-5-scenarios">My Feature 4</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-5-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-13"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-13-steps" aria-expanded="false" aria-controls="scenario-13-steps">My Scenario 13 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-13-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-37"> <h5>Given my step 37</h5> </li> <li class="step skipped text-warning" id="step-38"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-39"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-14"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-14-steps" aria-expanded="false" aria-controls="scenario-14-steps">My Scenario 14 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-14-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-40"> <h5>Given my step 40</h5> </li> <li class="step skipped text-warning" id="step-41"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-42"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-15"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-15-steps" aria-expanded="false" aria-controls="scenario-15-steps">My Scenario 15</div> <div class="panel-body collapse" id="scenario-15-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-43"> <h5>Given my step 43</h5> </li> <li class="step passed text-success" id="step-44"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-45"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-6"> <h3 class="text-success" data-toggle="collapse" href="#feature-6-scenarios" aria-expanded="false" aria-controls="feature-6-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-6-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-16"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-16-steps" aria-expanded="false" aria-controls="scenario-16-steps">My Scenario 16</div> <div class="panel-body collapse" id="scenario-16-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-46"> <h5>Given my step 46</h5> </li> <li class="step passed text-success" id="step-47"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-48"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-17"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-17-steps" aria-expanded="false" aria-controls="scenario-17-steps">My Scenario 17</div> <div class="panel-body collapse" id="scenario-17-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-49"> <h5>Given my step 49</h5> </li> <li class="step passed text-success" id="step-50"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-51"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-18"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-18-steps" aria-expanded="false" aria-controls="scenario-18-steps">My Scenario 18</div> <div class="panel-body collapse" id="scenario-18-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-52"> <h5>Given my step 52</h5> </li> <li class="step passed text-success" id="step-53"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-54"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-3"> <h2 class="text-danger" data-toggle="collapse" href="#area-3-features" aria-expanded="true" aria-controls="area-3-features">My Area 3</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-3-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">16</td> <td class="skipped warning text-center">10</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 59.2592592592593%"></td> <td class="skipped-bar bg-warning" style="width: 37.037037037037%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left: 2px solid #AD4D4B;" id="area-3-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #AD4D4B;" id="feature-7"> <h3 class="text-danger" data-toggle="collapse" href="#feature-7-scenarios" aria-expanded="true" aria-controls="feature-7-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 44.4444444444444%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse in" id="feature-7-scenarios" aria-expanded="true"> <li class="scenario failed" id="scenario-19"> <div class="panel panel-danger"> <div class="panel-heading" data-toggle="collapse" href="#scenario-19-steps" aria-expanded="true" aria-controls="scenario-19-steps">My Scenario 19 [Failed]</div> <div class="panel-body collapse in" id="scenario-19-steps" aria-expanded="true"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-55"> <h5>Given my step 55</h5> </li> <li class="step failed text-danger" id="step-56"> <h5>When my failed step 56 [Failed]</h5> <dl class="exception dl-horizontal"> <dt>Error Type</dt> <dd class="error-type">Exception</dd> <dt>Message</dt> <dd class="error-message"><pre>My Error</pre></dd> <dt>Stack</dt> <dd class="error-stack"><pre> at xBDD.Reporting.Test.Steps.HtmlReport.<>c.<OfAFullTestRunWithAllOutcomes>b__2_2(Step s2) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\test\xBDD.Reporting.Test\Steps\HtmlReport.cs:line 123 at xBDD.Core.StepExecutor.ExecuteStep(Step step) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\src\xBDD.Core\Core\StepExecutor.cs:line 44</pre></dd> </dl> </li> <li class="step skipped text-warning" id="step-57"> <h5>Then my step 3 [Skipped - Previous Error]</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-20"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-20-steps" aria-expanded="false" aria-controls="scenario-20-steps">My Scenario 20 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-20-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-58"> <h5>Given my step 58</h5> </li> <li class="step skipped text-warning" id="step-59"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-60"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-21"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-21-steps" aria-expanded="false" aria-controls="scenario-21-steps">My Scenario 21</div> <div class="panel-body collapse" id="scenario-21-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-61"> <h5>Given my step 61</h5> </li> <li class="step passed text-success" id="step-62"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-63"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-8"> <h3 class="text-warning" data-toggle="collapse" href="#feature-8-scenarios" aria-expanded="false" aria-controls="feature-8-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-8-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-22"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-22-steps" aria-expanded="false" aria-controls="scenario-22-steps">My Scenario 22 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-22-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-64"> <h5>Given my step 64</h5> </li> <li class="step skipped text-warning" id="step-65"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-66"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-23"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-23-steps" aria-expanded="false" aria-controls="scenario-23-steps">My Scenario 23 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-23-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-67"> <h5>Given my step 67</h5> </li> <li class="step skipped text-warning" id="step-68"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-69"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-24"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-24-steps" aria-expanded="false" aria-controls="scenario-24-steps">My Scenario 24</div> <div class="panel-body collapse" id="scenario-24-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-70"> <h5>Given my step 70</h5> </li> <li class="step passed text-success" id="step-71"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-72"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-9"> <h3 class="text-success" data-toggle="collapse" href="#feature-9-scenarios" aria-expanded="false" aria-controls="feature-9-scenarios">My Feature 9</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-9-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-25"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-25-steps" aria-expanded="false" aria-controls="scenario-25-steps">My Scenario 25</div> <div class="panel-body collapse" id="scenario-25-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-73"> <h5>Given my step 73</h5> </li> <li class="step passed text-success" id="step-74"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-75"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-26"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-26-steps" aria-expanded="false" aria-controls="scenario-26-steps">My Scenario 26</div> <div class="panel-body collapse" id="scenario-26-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-76"> <h5>Given my step 76</h5> </li> <li class="step passed text-success" id="step-77"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-78"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-27"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-27-steps" aria-expanded="false" aria-controls="scenario-27-steps">My Scenario 27</div> <div class="panel-body collapse" id="scenario-27-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-79"> <h5>Given my step 79</h5> </li> <li class="step passed text-success" id="step-80"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-81"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
4. And the passing, green bar should have a width of 70%
5. And the skipped, yellow bar should have a width of 26%
6. And the failed, red bar should have a width of 4%
7. And the total number of scenarios should show to the left of the outcome bar with a value of 27
8. And the number of passed scenarios should show to the left of the outcome bar with a value of 19
9. And the number of skipped scenarios should show to the left of the outcome bar with a value of 7
10. And the number of failed scenarios should show to the left of the outcome bar with a value of 1
Failed Skipped And Passing Steps Stats
1. Given the test results of a full test run with all outcomes
2. When the user views the html report [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-danger">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">27</td> <td class="passed success text-center">19</td> <td class="skipped warning text-center">7</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 70.3703703703704%"></td> <td class="skipped-bar bg-warning" style="width: 25.9259259259259%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">81</td> <td class="passed success text-center">58</td> <td class="skipped warning text-center">22</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 71.6049382716049%"></td> <td class="skipped-bar bg-warning" style="width: 27.1604938271605%"></td> <td class="failed-bar bg-danger" style="width: 1.23456790123457%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 1</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">27</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-2"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-2-steps" aria-expanded="false" aria-controls="scenario-2-steps">My Scenario 2</div> <div class="panel-body collapse" id="scenario-2-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-4"> <h5>Given my step 4</h5> </li> <li class="step passed text-success" id="step-5"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-6"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-3"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-3-steps" aria-expanded="false" aria-controls="scenario-3-steps">My Scenario 3</div> <div class="panel-body collapse" id="scenario-3-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-7"> <h5>Given my step 7</h5> </li> <li class="step passed text-success" id="step-8"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-9"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-2"> <h3 class="text-success" data-toggle="collapse" href="#feature-2-scenarios" aria-expanded="false" aria-controls="feature-2-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-2-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-4"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-4-steps" aria-expanded="false" aria-controls="scenario-4-steps">My Scenario 4</div> <div class="panel-body collapse" id="scenario-4-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-10"> <h5>Given my step 10</h5> </li> <li class="step passed text-success" id="step-11"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-12"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-5"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-5-steps" aria-expanded="false" aria-controls="scenario-5-steps">My Scenario 5</div> <div class="panel-body collapse" id="scenario-5-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-13"> <h5>Given my step 13</h5> </li> <li class="step passed text-success" id="step-14"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-15"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-6"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-6-steps" aria-expanded="false" aria-controls="scenario-6-steps">My Scenario 6</div> <div class="panel-body collapse" id="scenario-6-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-16"> <h5>Given my step 16</h5> </li> <li class="step passed text-success" id="step-17"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-18"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-3"> <h3 class="text-success" data-toggle="collapse" href="#feature-3-scenarios" aria-expanded="false" aria-controls="feature-3-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-3-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-7"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-7-steps" aria-expanded="false" aria-controls="scenario-7-steps">My Scenario 7</div> <div class="panel-body collapse" id="scenario-7-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-19"> <h5>Given my step 19</h5> </li> <li class="step passed text-success" id="step-20"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-21"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-8"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-8-steps" aria-expanded="false" aria-controls="scenario-8-steps">My Scenario 8</div> <div class="panel-body collapse" id="scenario-8-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-22"> <h5>Given my step 22</h5> </li> <li class="step passed text-success" id="step-23"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-24"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-9"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-9-steps" aria-expanded="false" aria-controls="scenario-9-steps">My Scenario 9</div> <div class="panel-body collapse" id="scenario-9-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-25"> <h5>Given my step 25</h5> </li> <li class="step passed text-success" id="step-26"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-27"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-2"> <h2 class="text-warning" data-toggle="collapse" href="#area-2-features" aria-expanded="false" aria-controls="area-2-features">My Area 2</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-2-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">15</td> <td class="skipped warning text-center">12</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #917545;" id="area-2-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-4"> <h3 class="text-warning" data-toggle="collapse" href="#feature-4-scenarios" aria-expanded="false" aria-controls="feature-4-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-4-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-10"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-10-steps" aria-expanded="false" aria-controls="scenario-10-steps">My Scenario 10 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-10-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-28"> <h5>Given my step 28</h5> </li> <li class="step skipped text-warning" id="step-29"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-30"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-11"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-11-steps" aria-expanded="false" aria-controls="scenario-11-steps">My Scenario 11 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-11-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-31"> <h5>Given my step 31</h5> </li> <li class="step skipped text-warning" id="step-32"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-33"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-12"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-12-steps" aria-expanded="false" aria-controls="scenario-12-steps">My Scenario 12</div> <div class="panel-body collapse" id="scenario-12-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-34"> <h5>Given my step 34</h5> </li> <li class="step passed text-success" id="step-35"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-36"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-5"> <h3 class="text-warning" data-toggle="collapse" href="#feature-5-scenarios" aria-expanded="false" aria-controls="feature-5-scenarios">My Feature 4</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-5-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-13"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-13-steps" aria-expanded="false" aria-controls="scenario-13-steps">My Scenario 13 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-13-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-37"> <h5>Given my step 37</h5> </li> <li class="step skipped text-warning" id="step-38"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-39"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-14"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-14-steps" aria-expanded="false" aria-controls="scenario-14-steps">My Scenario 14 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-14-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-40"> <h5>Given my step 40</h5> </li> <li class="step skipped text-warning" id="step-41"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-42"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-15"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-15-steps" aria-expanded="false" aria-controls="scenario-15-steps">My Scenario 15</div> <div class="panel-body collapse" id="scenario-15-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-43"> <h5>Given my step 43</h5> </li> <li class="step passed text-success" id="step-44"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-45"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-6"> <h3 class="text-success" data-toggle="collapse" href="#feature-6-scenarios" aria-expanded="false" aria-controls="feature-6-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-6-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-16"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-16-steps" aria-expanded="false" aria-controls="scenario-16-steps">My Scenario 16</div> <div class="panel-body collapse" id="scenario-16-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-46"> <h5>Given my step 46</h5> </li> <li class="step passed text-success" id="step-47"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-48"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-17"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-17-steps" aria-expanded="false" aria-controls="scenario-17-steps">My Scenario 17</div> <div class="panel-body collapse" id="scenario-17-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-49"> <h5>Given my step 49</h5> </li> <li class="step passed text-success" id="step-50"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-51"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-18"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-18-steps" aria-expanded="false" aria-controls="scenario-18-steps">My Scenario 18</div> <div class="panel-body collapse" id="scenario-18-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-52"> <h5>Given my step 52</h5> </li> <li class="step passed text-success" id="step-53"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-54"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-3"> <h2 class="text-danger" data-toggle="collapse" href="#area-3-features" aria-expanded="true" aria-controls="area-3-features">My Area 3</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-3-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">16</td> <td class="skipped warning text-center">10</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 59.2592592592593%"></td> <td class="skipped-bar bg-warning" style="width: 37.037037037037%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left: 2px solid #AD4D4B;" id="area-3-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #AD4D4B;" id="feature-7"> <h3 class="text-danger" data-toggle="collapse" href="#feature-7-scenarios" aria-expanded="true" aria-controls="feature-7-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 44.4444444444444%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse in" id="feature-7-scenarios" aria-expanded="true"> <li class="scenario failed" id="scenario-19"> <div class="panel panel-danger"> <div class="panel-heading" data-toggle="collapse" href="#scenario-19-steps" aria-expanded="true" aria-controls="scenario-19-steps">My Scenario 19 [Failed]</div> <div class="panel-body collapse in" id="scenario-19-steps" aria-expanded="true"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-55"> <h5>Given my step 55</h5> </li> <li class="step failed text-danger" id="step-56"> <h5>When my failed step 56 [Failed]</h5> <dl class="exception dl-horizontal"> <dt>Error Type</dt> <dd class="error-type">Exception</dd> <dt>Message</dt> <dd class="error-message"><pre>My Error</pre></dd> <dt>Stack</dt> <dd class="error-stack"><pre> at xBDD.Reporting.Test.Steps.HtmlReport.<>c.<OfAFullTestRunWithAllOutcomes>b__2_2(Step s2) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\test\xBDD.Reporting.Test\Steps\HtmlReport.cs:line 123 at xBDD.Core.StepExecutor.ExecuteStep(Step step) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\src\xBDD.Core\Core\StepExecutor.cs:line 44</pre></dd> </dl> </li> <li class="step skipped text-warning" id="step-57"> <h5>Then my step 3 [Skipped - Previous Error]</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-20"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-20-steps" aria-expanded="false" aria-controls="scenario-20-steps">My Scenario 20 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-20-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-58"> <h5>Given my step 58</h5> </li> <li class="step skipped text-warning" id="step-59"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-60"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-21"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-21-steps" aria-expanded="false" aria-controls="scenario-21-steps">My Scenario 21</div> <div class="panel-body collapse" id="scenario-21-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-61"> <h5>Given my step 61</h5> </li> <li class="step passed text-success" id="step-62"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-63"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-8"> <h3 class="text-warning" data-toggle="collapse" href="#feature-8-scenarios" aria-expanded="false" aria-controls="feature-8-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-8-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-22"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-22-steps" aria-expanded="false" aria-controls="scenario-22-steps">My Scenario 22 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-22-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-64"> <h5>Given my step 64</h5> </li> <li class="step skipped text-warning" id="step-65"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-66"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-23"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-23-steps" aria-expanded="false" aria-controls="scenario-23-steps">My Scenario 23 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-23-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-67"> <h5>Given my step 67</h5> </li> <li class="step skipped text-warning" id="step-68"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-69"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-24"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-24-steps" aria-expanded="false" aria-controls="scenario-24-steps">My Scenario 24</div> <div class="panel-body collapse" id="scenario-24-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-70"> <h5>Given my step 70</h5> </li> <li class="step passed text-success" id="step-71"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-72"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-9"> <h3 class="text-success" data-toggle="collapse" href="#feature-9-scenarios" aria-expanded="false" aria-controls="feature-9-scenarios">My Feature 9</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-9-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-25"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-25-steps" aria-expanded="false" aria-controls="scenario-25-steps">My Scenario 25</div> <div class="panel-body collapse" id="scenario-25-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-73"> <h5>Given my step 73</h5> </li> <li class="step passed text-success" id="step-74"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-75"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-26"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-26-steps" aria-expanded="false" aria-controls="scenario-26-steps">My Scenario 26</div> <div class="panel-body collapse" id="scenario-26-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-76"> <h5>Given my step 76</h5> </li> <li class="step passed text-success" id="step-77"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-78"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-27"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-27-steps" aria-expanded="false" aria-controls="scenario-27-steps">My Scenario 27</div> <div class="panel-body collapse" id="scenario-27-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-79"> <h5>Given my step 79</h5> </li> <li class="step passed text-success" id="step-80"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-81"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
3. Then there should be a green, yellow, and red bar for the passing, skipped, and failing steps under the test run name [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-danger">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">27</td> <td class="passed success text-center">19</td> <td class="skipped warning text-center">7</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 70.3703703703704%"></td> <td class="skipped-bar bg-warning" style="width: 25.9259259259259%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">81</td> <td class="passed success text-center">58</td> <td class="skipped warning text-center">22</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 71.6049382716049%"></td> <td class="skipped-bar bg-warning" style="width: 27.1604938271605%"></td> <td class="failed-bar bg-danger" style="width: 1.23456790123457%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="areas list-unstyled"> <li class="area" id="area-1"> <h2 class="text-success collapsed" data-toggle="collapse" href="#area-1-features" aria-expanded="false" aria-controls="area-1-features">My Area 1</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-1-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">27</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #5A8B5B;" id="area-1-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-1"> <h3 class="text-success" data-toggle="collapse" href="#feature-1-scenarios" aria-expanded="false" aria-controls="feature-1-scenarios">My Feature 1</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-1-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-1"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-1-steps" aria-expanded="false" aria-controls="scenario-1-steps">My Scenario 1</div> <div class="panel-body collapse" id="scenario-1-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-1"> <h5>Given my step 1</h5> </li> <li class="step passed text-success" id="step-2"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-3"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-2"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-2-steps" aria-expanded="false" aria-controls="scenario-2-steps">My Scenario 2</div> <div class="panel-body collapse" id="scenario-2-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-4"> <h5>Given my step 4</h5> </li> <li class="step passed text-success" id="step-5"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-6"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-3"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-3-steps" aria-expanded="false" aria-controls="scenario-3-steps">My Scenario 3</div> <div class="panel-body collapse" id="scenario-3-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-7"> <h5>Given my step 7</h5> </li> <li class="step passed text-success" id="step-8"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-9"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-2"> <h3 class="text-success" data-toggle="collapse" href="#feature-2-scenarios" aria-expanded="false" aria-controls="feature-2-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-2-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-4"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-4-steps" aria-expanded="false" aria-controls="scenario-4-steps">My Scenario 4</div> <div class="panel-body collapse" id="scenario-4-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-10"> <h5>Given my step 10</h5> </li> <li class="step passed text-success" id="step-11"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-12"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-5"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-5-steps" aria-expanded="false" aria-controls="scenario-5-steps">My Scenario 5</div> <div class="panel-body collapse" id="scenario-5-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-13"> <h5>Given my step 13</h5> </li> <li class="step passed text-success" id="step-14"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-15"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-6"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-6-steps" aria-expanded="false" aria-controls="scenario-6-steps">My Scenario 6</div> <div class="panel-body collapse" id="scenario-6-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-16"> <h5>Given my step 16</h5> </li> <li class="step passed text-success" id="step-17"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-18"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-3"> <h3 class="text-success" data-toggle="collapse" href="#feature-3-scenarios" aria-expanded="false" aria-controls="feature-3-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-1-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-1-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-3-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-7"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-7-steps" aria-expanded="false" aria-controls="scenario-7-steps">My Scenario 7</div> <div class="panel-body collapse" id="scenario-7-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-19"> <h5>Given my step 19</h5> </li> <li class="step passed text-success" id="step-20"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-21"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-8"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-8-steps" aria-expanded="false" aria-controls="scenario-8-steps">My Scenario 8</div> <div class="panel-body collapse" id="scenario-8-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-22"> <h5>Given my step 22</h5> </li> <li class="step passed text-success" id="step-23"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-24"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-9"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-9-steps" aria-expanded="false" aria-controls="scenario-9-steps">My Scenario 9</div> <div class="panel-body collapse" id="scenario-9-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-25"> <h5>Given my step 25</h5> </li> <li class="step passed text-success" id="step-26"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-27"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-2"> <h2 class="text-warning" data-toggle="collapse" href="#area-2-features" aria-expanded="false" aria-controls="area-2-features">My Area 2</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-2-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">15</td> <td class="skipped warning text-center">12</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse" style="border-left: 2px solid #917545;" id="area-2-features" aria-expanded="false"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-4"> <h3 class="text-warning" data-toggle="collapse" href="#feature-4-scenarios" aria-expanded="false" aria-controls="feature-4-scenarios">My Feature 2</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-4-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-10"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-10-steps" aria-expanded="false" aria-controls="scenario-10-steps">My Scenario 10 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-10-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-28"> <h5>Given my step 28</h5> </li> <li class="step skipped text-warning" id="step-29"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-30"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-11"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-11-steps" aria-expanded="false" aria-controls="scenario-11-steps">My Scenario 11 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-11-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-31"> <h5>Given my step 31</h5> </li> <li class="step skipped text-warning" id="step-32"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-33"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-12"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-12-steps" aria-expanded="false" aria-controls="scenario-12-steps">My Scenario 12</div> <div class="panel-body collapse" id="scenario-12-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-34"> <h5>Given my step 34</h5> </li> <li class="step passed text-success" id="step-35"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-36"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-5"> <h3 class="text-warning" data-toggle="collapse" href="#feature-5-scenarios" aria-expanded="false" aria-controls="feature-5-scenarios">My Feature 4</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-5-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-13"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-13-steps" aria-expanded="false" aria-controls="scenario-13-steps">My Scenario 13 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-13-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-37"> <h5>Given my step 37</h5> </li> <li class="step skipped text-warning" id="step-38"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-39"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-14"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-14-steps" aria-expanded="false" aria-controls="scenario-14-steps">My Scenario 14 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-14-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-40"> <h5>Given my step 40</h5> </li> <li class="step skipped text-warning" id="step-41"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-42"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-15"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-15-steps" aria-expanded="false" aria-controls="scenario-15-steps">My Scenario 15</div> <div class="panel-body collapse" id="scenario-15-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-43"> <h5>Given my step 43</h5> </li> <li class="step passed text-success" id="step-44"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-45"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-6"> <h3 class="text-success" data-toggle="collapse" href="#feature-6-scenarios" aria-expanded="false" aria-controls="feature-6-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-2-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-2-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-6-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-16"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-16-steps" aria-expanded="false" aria-controls="scenario-16-steps">My Scenario 16</div> <div class="panel-body collapse" id="scenario-16-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-46"> <h5>Given my step 46</h5> </li> <li class="step passed text-success" id="step-47"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-48"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-17"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-17-steps" aria-expanded="false" aria-controls="scenario-17-steps">My Scenario 17</div> <div class="panel-body collapse" id="scenario-17-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-49"> <h5>Given my step 49</h5> </li> <li class="step passed text-success" id="step-50"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-51"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-18"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-18-steps" aria-expanded="false" aria-controls="scenario-18-steps">My Scenario 18</div> <div class="panel-body collapse" id="scenario-18-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-52"> <h5>Given my step 52</h5> </li> <li class="step passed text-success" id="step-53"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-54"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> <li class="area" id="area-3"> <h2 class="text-danger" data-toggle="collapse" href="#area-3-features" aria-expanded="true" aria-controls="area-3-features">My Area 3</h2> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="area-3-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">9</td> <td class="passed success text-center">5</td> <td class="skipped warning text-center">3</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 55.5555555555556%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> <tr id="area-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">27</td> <td class="passed success text-center">16</td> <td class="skipped warning text-center">10</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 59.2592592592593%"></td> <td class="skipped-bar bg-warning" style="width: 37.037037037037%"></td> <td class="failed-bar bg-danger" style="width: 3.7037037037037%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="features list-unstyled collapse in" style="border-left: 2px solid #AD4D4B;" id="area-3-features" aria-expanded="true"> <li class="feature" style="box-shadow: 1px 1px 8px 1px #AD4D4B;" id="feature-7"> <h3 class="text-danger" data-toggle="collapse" href="#feature-7-scenarios" aria-expanded="true" aria-controls="feature-7-scenarios">My Feature 3</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">1</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 33.3333333333333%"></td> <td class="failed-bar bg-danger" style="width: 33.3333333333333%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">4</td> <td class="skipped warning text-center">4</td> <td class="failed danger text-center">1</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 44.4444444444444%"></td> <td class="skipped-bar bg-warning" style="width: 44.4444444444444%"></td> <td class="failed-bar bg-danger" style="width: 11.1111111111111%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse in" id="feature-7-scenarios" aria-expanded="true"> <li class="scenario failed" id="scenario-19"> <div class="panel panel-danger"> <div class="panel-heading" data-toggle="collapse" href="#scenario-19-steps" aria-expanded="true" aria-controls="scenario-19-steps">My Scenario 19 [Failed]</div> <div class="panel-body collapse in" id="scenario-19-steps" aria-expanded="true"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-55"> <h5>Given my step 55</h5> </li> <li class="step failed text-danger" id="step-56"> <h5>When my failed step 56 [Failed]</h5> <dl class="exception dl-horizontal"> <dt>Error Type</dt> <dd class="error-type">Exception</dd> <dt>Message</dt> <dd class="error-message"><pre>My Error</pre></dd> <dt>Stack</dt> <dd class="error-stack"><pre> at xBDD.Reporting.Test.Steps.HtmlReport.<>c.<OfAFullTestRunWithAllOutcomes>b__2_2(Step s2) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\test\xBDD.Reporting.Test\Steps\HtmlReport.cs:line 123 at xBDD.Core.StepExecutor.ExecuteStep(Step step) in c:\Users\stearm01\Source\Repos\xBDD\xBDD\src\xBDD.Core\Core\StepExecutor.cs:line 44</pre></dd> </dl> </li> <li class="step skipped text-warning" id="step-57"> <h5>Then my step 3 [Skipped - Previous Error]</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-20"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-20-steps" aria-expanded="false" aria-controls="scenario-20-steps">My Scenario 20 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-20-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-58"> <h5>Given my step 58</h5> </li> <li class="step skipped text-warning" id="step-59"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-60"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-21"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-21-steps" aria-expanded="false" aria-controls="scenario-21-steps">My Scenario 21</div> <div class="panel-body collapse" id="scenario-21-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-61"> <h5>Given my step 61</h5> </li> <li class="step passed text-success" id="step-62"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-63"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #917545;" id="feature-8"> <h3 class="text-warning" data-toggle="collapse" href="#feature-8-scenarios" aria-expanded="false" aria-controls="feature-8-scenarios">My Feature 6</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">1</td> <td class="skipped warning text-center">2</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">6</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 33.3333333333333%"></td> <td class="skipped-bar bg-warning" style="width: 66.6666666666667%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-8-scenarios" aria-expanded="false"> <li class="scenario skipped" id="scenario-22"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-22-steps" aria-expanded="false" aria-controls="scenario-22-steps">My Scenario 22 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-22-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-64"> <h5>Given my step 64</h5> </li> <li class="step skipped text-warning" id="step-65"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-66"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario skipped" id="scenario-23"> <div class="panel panel-warning"> <div class="panel-heading" data-toggle="collapse" href="#scenario-23-steps" aria-expanded="false" aria-controls="scenario-23-steps">My Scenario 23 [Skipped - Deferred]</div> <div class="panel-body collapse" id="scenario-23-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step skipped text-warning" id="step-67"> <h5>Given my step 67</h5> </li> <li class="step skipped text-warning" id="step-68"> <h5>When my step 2</h5> </li> <li class="step skipped text-warning" id="step-69"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-24"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-24-steps" aria-expanded="false" aria-controls="scenario-24-steps">My Scenario 24</div> <div class="panel-body collapse" id="scenario-24-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-70"> <h5>Given my step 70</h5> </li> <li class="step passed text-success" id="step-71"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-72"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> <li class="feature" style="box-shadow: 1px 1px 8px 1px #5A8B5B;" id="feature-9"> <h3 class="text-success" data-toggle="collapse" href="#feature-9-scenarios" aria-expanded="false" aria-controls="feature-9-scenarios">My Feature 9</h3> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="feature-3-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">3</td> <td class="passed success text-center">3</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="feature-3-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">9</td> <td class="passed success text-center">9</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 100%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> <ol class="scenarios list-unstyled collapse" id="feature-9-scenarios" aria-expanded="false"> <li class="scenario passed" id="scenario-25"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-25-steps" aria-expanded="false" aria-controls="scenario-25-steps">My Scenario 25</div> <div class="panel-body collapse" id="scenario-25-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-73"> <h5>Given my step 73</h5> </li> <li class="step passed text-success" id="step-74"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-75"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-26"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-26-steps" aria-expanded="false" aria-controls="scenario-26-steps">My Scenario 26</div> <div class="panel-body collapse" id="scenario-26-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-76"> <h5>Given my step 76</h5> </li> <li class="step passed text-success" id="step-77"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-78"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> <li class="scenario passed" id="scenario-27"> <div class="panel panel-success"> <div class="panel-heading" data-toggle="collapse" href="#scenario-27-steps" aria-expanded="false" aria-controls="scenario-27-steps">My Scenario 27</div> <div class="panel-body collapse" id="scenario-27-steps" aria-expanded="false"> <ol class="steps list-unstyled"> <li class="step passed text-success" id="step-79"> <h5>Given my step 79</h5> </li> <li class="step passed text-success" id="step-80"> <h5>When my step 2</h5> </li> <li class="step passed text-success" id="step-81"> <h5>Then my step 3</h5> </li> </ol> </div> </div> </li> </ol> </li> </ol> </li> </ol> </body></html>
4. And the passing, green bar should have a width of 72%
5. And the skipped, yellow bar should have a width of 27%
6. And the failed, red bar should have a width of 1%
7. And the total number of steps should show to the left of the outcome bar with a value of 81
8. And the number of passed steps should show to the left of the outcome bar with a value of 58
9. And the number of skipped steps should show to the left of the outcome bar with a value of 22
10. And the number of failed steps should show to the left of the outcome bar with a value of 1

WriteResults

Features

Scenarios

Steps

Browse Html Report

Scenarios

Steps

View Empty Test Run
1. Given the test results of an empty test run
2. When the user views the html report [Output]
  Output
  
  Preview
  
  Code
  
  <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Test Run</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style> ul.steps, div.output, div.mp, dl.exception { margin-left: 2em } iframe { border: 1px solid gray; resize: both; overflow: auto; } li.scenario h4 { margin: .5em; } ol.features { padding: .5em; } li.feature { margin: 1.5em; padding: .1em 2em; box-shadow: 1px 1px 8px 1px rgb(202, 202, 202); } li.scenario .panel { margin: 2em; } .table th, .table td { border-top: none !important; line-height: 1 !important; padding: 2px 10px !important; } td.graph td { padding: 0px !important; }</style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css"> <script language="javascript" type="text/javascript">function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; }</script> </head> <body class="container-fluid"> <nav class="navbar navbar-default" id="menu"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" id="menu-button" type="button" data-toggle="collapse" data-target="#menu-body" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="menu-body"> <ul class="nav navbar-nav"> <li> <a id="expand-all-areas-button" href="javascript: $('ol.features').collapse('show');">Expand All Areas</a> </li> </ul> </div> </div> </nav> <div class="page-header"> <h1 class="testrun-name text-muted">My Test Run</h1> </div> <table class="table table-condensed" style="width: 100%; empty-cells: show;"> <tbody><tr id="testrun-area-stats"> <td class="stats-label text-right">Areas</td> <td class="total info text-center">0</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-feature-stats"> <td class="stats-label text-right">Features</td> <td class="total info text-center">0</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-scenario-stats"> <td class="stats-label text-right">Scenarios</td> <td class="total info text-center">0</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> <tr id="testrun-step-stats"> <td class="stats-label text-right">Steps</td> <td class="total info text-center">0</td> <td class="passed success text-center">0</td> <td class="skipped warning text-center">0</td> <td class="failed danger text-center">0</td> <td class="graph" style="width: 100%;"> <table style="width: 100%; empty-cells: show; height: 14px;"> <tbody><tr> <td class="passed-bar bg-success" style="width: 0%"></td> <td class="skipped-bar bg-warning" style="width: 0%"></td> <td class="failed-bar bg-danger" style="width: 0%"></td> </tr> </tbody></table> </td> </tr> </tbody></table> </body></html>
3. Then the report will show the test run name at the top
4. And the report will show the test run name as the title for the page
View Passing Scenario [Skipped - Not Started]
1. Given the test results of a single passing scenario
2. When the user views the html report
3. Then the area path will be green
4. And the feature name will be green
5. And the scenario name will be green
6. And the step names will be green
View Run Scenario [Skipped - Not Started]
1. Given the test results of a single passing scenario
2. When the user views the html report
3. Then the area path will be displayed
4. And the feature name will be displayed indented under the area path
5. And the scenario name will be displayed indented under the feature name
6. And the steps will be displayed indented, under the scenario
View Run Step With Multiline Parameter Of Text [Skipped - Not Started]
1. Given the test results of a single passing scenario
2. When the user views the html report
3. Then the steps multiline parameter will show indented under the step name
4. And the multline parameter will have line breaks and indentation preserved

Write To Text

Scenarios

Steps

Write Emtpy Test Run

Given the following method

using xBDD.Test;
namespace xBDD.Reporting.Test.Features.WriteResults.WriteToTextScenarios
{
    public class EmptyTestRun : IExecute<string>
    {
        public string Execute()
        {
            var xBDD = new xBDDMock();
            xBDD.CurrentRun.TestRun.Name = "My Test Run";
            return xBDD.CurrentRun.TestRun.WriteToText();
        }
    }
}

When the method is executed

Then the test results written should match the template:

My Test Run

Write Run Empty Scenario

Given the following method

using xBDD.Test;
namespace xBDD.Reporting.Test.Features.WriteResults.WriteToTextScenarios
{
    public class RunEmptyScenario : IExecute<string>
    {
        public string Execute()
        {
            var xBDD = new xBDDMock();
            xBDD.CurrentRun.TestRun.Name = "My Test Run";
            xBDD.CurrentRun
                .AddScenario("My Scenario", "My Feature", "My.Area.Path")
                .Run();
            return xBDD.CurrentRun.TestRun.WriteToText();
        }
    }
}

When the method is executed

Then the test results written should match the template:

My Test Run

My.Area.Path
	My Feature
		My Scenario

Write Run Multiple Areas

Given the following method

using xBDD.Test;
namespace xBDD.Reporting.Test.Features.WriteResults.WriteToTextScenarios
{
    public class RunMultipleAreas : IExecute<string>
    {
        public string Execute()
        {
            var xBDD = new xBDDMock();
            xBDD.CurrentRun.TestRun.Name = "My Test Run";
            try
            {
                xBDD.CurrentRun
                    .AddScenario("My Scenario One", "My Feature One", "My.Area.Path.One")
                    .Given(xBDD.CreateStep("my starting condition"))
                    .When(xBDD.CreateStep("my action"))
                    .Then(xBDD.CreateStep("my ending condition"))
                    .Run();
                xBDD.CurrentRun
                    .AddScenario("My Scenario Two", "My Feature One", "My.Area.Path.One")
                    .Given(xBDD.CreateStep("my starting condition"))
                    .When(xBDD.CreateStep("my action"))
                    .Then(xBDD.CreateStep("my ending condition"))
                    .Run();
                xBDD.CurrentRun
                    .AddScenario("My Scenario One", "My Feature Two", "My.Area.Path.Two")
                    .Given(xBDD.CreateStep("my starting condition"))
                    .When(xBDD.CreateStep("my action"))
                    .Then(xBDD.CreateStep("my ending condition"))
                    .Run();
                xBDD.CurrentRun
                    .AddScenario("My Scenario Two", "My Feature Two", "My.Area.Path.Two")
                    .Given(xBDD.CreateStep("my starting condition"))
                    .When(xBDD.CreateStep("my action"))
                    .Then(xBDD.CreateStep("my ending condition"))
                    .Run();
            }
            catch { }
            return xBDD.CurrentRun.TestRun.WriteToText();
        }
    }
}

When the method is executed

Then the test results written should match the template:

My Test Run

My.Area.Path.One
	My Feature One
		My Scenario One
			Given my starting condition
			When my action
			Then my ending condition
		My Scenario Two
			Given my starting condition
			When my action
			Then my ending condition
My.Area.Path.Two
	My Feature Two
		My Scenario One
			Given my starting condition
			When my action
			Then my ending condition
		My Scenario Two
			Given my starting condition
			When my action
			Then my ending condition

Write Run Multiple Features Same Area

Given the following method

using xBDD.Test;
namespace xBDD.Reporting.Test.Features.WriteResults.WriteToTextScenarios
{
    public class RunMultipleFeaturesSameArea : IExecute<string>
    {
        public string Execute()
        {
            var xBDD = new xBDDMock();
            xBDD.CurrentRun.TestRun.Name = "My Test Run";
            try
            {
                xBDD.CurrentRun
                    .AddScenario("My Scenario One", "My Feature One", "My.Area.Path")
                    .Given(xBDD.CreateStep("my starting condition"))
                    .When(xBDD.CreateStep("my action"))
                    .Then(xBDD.CreateStep("my ending condition"))
                    .Run();
                xBDD.CurrentRun
                    .AddScenario("My Scenario Two", "My Feature One", "My.Area.Path")
                    .Given(xBDD.CreateStep("my starting condition"))
                    .When(xBDD.CreateStep("my action"))
                    .Then(xBDD.CreateStep("my ending condition"))
                    .Run();
                xBDD.CurrentRun
                    .AddScenario("My Scenario One", "My Feature Two", "My.Area.Path")
                    .Given(xBDD.CreateStep("my starting condition"))
                    .When(xBDD.CreateStep("my action"))
                    .Then(xBDD.CreateStep("my ending condition"))
                    .Run();
                xBDD.CurrentRun
                    .AddScenario("My Scenario Two", "My Feature Two", "My.Area.Path")
                    .Given(xBDD.CreateStep("my starting condition"))
                    .When(xBDD.CreateStep("my action"))
                    .Then(xBDD.CreateStep("my ending condition"))
                    .Run();
            }
            catch { }
            return xBDD.CurrentRun.TestRun.WriteToText();
        }
    }
}

When the method is executed

Then the test results written should match the template:

My Test Run

My.Area.Path
	My Feature One
		My Scenario One
			Given my starting condition
			When my action
			Then my ending condition
		My Scenario Two
			Given my starting condition
			When my action
			Then my ending condition
	My Feature Two
		My Scenario One
			Given my starting condition
			When my action
			Then my ending condition
		My Scenario Two
			Given my starting condition
			When my action
			Then my ending condition

Write Run Multiple Scenarios Same Feature

Given the following method

using xBDD.Test;
namespace xBDD.Reporting.Test.Features.WriteResults.WriteToTextScenarios
{
    public class RunMultipleScenariosSameFeature : IExecute<string>
    {
        public string Execute()
        {
            var xBDD = new xBDDMock();
            xBDD.CurrentRun.TestRun.Name = "My Test Run";
            try
            {
                xBDD.CurrentRun
                    .AddScenario("My Scenario One", "My Feature", "My.Area.Path")
                    .Given(xBDD.CreateStep("my starting condition"))
                    .When(xBDD.CreateStep("my action"))
                    .Then(xBDD.CreateStep("my ending condition"))
                    .Run();
                xBDD.CurrentRun
                    .AddScenario("My Scenario Two", "My Feature", "My.Area.Path")
                    .Given(xBDD.CreateStep("my starting condition"))
                    .When(xBDD.CreateStep("my action"))
                    .Then(xBDD.CreateStep("my ending condition"))
                    .Run();
            }
            catch { }
            return xBDD.CurrentRun.TestRun.WriteToText();
        }
    }
}

When the method is executed

Then the test results written should match the template:

My Test Run

My.Area.Path
	My Feature
		My Scenario One
			Given my starting condition
			When my action
			Then my ending condition
		My Scenario Two
			Given my starting condition
			When my action
			Then my ending condition

Write Run Scenario With Failed Step

Given the following method

using System;
using xBDD.Test;
namespace xBDD.Reporting.Test.Features.WriteResults.WriteToTextScenarios
{
    public class RunScenarioWithFailedStep : IExecute<string>
    {
        public string Execute()
        {
            var xBDD = new xBDDMock();
            xBDD.CurrentRun.TestRun.Name = "My Test Run";
            try
            {
                xBDD.CurrentRun
                    .AddScenario("My Scenario", "My Feature", "My.Area.Path")
                    .Given(xBDD.CreateStep("my starting condition"))
                    .When(xBDD.CreateStep("my action", (s) => { throw new Exception("My Error"); }))
                    .Then(xBDD.CreateStep("my ending condition"))
                    .Run();
            }
            catch { }
            return xBDD.CurrentRun.TestRun.WriteToText();
        }
    }
}

When the method is executed

Then the test results written should match the template:

My Test Run

My.Area.Path
	My Feature
		My Scenario [Failed]
			Given my starting condition
			When my action [Failed]
				Error Type: Exception
				   Message: My Error
{{				     Stack\: .*}}
{{.*}}/rl
			Then my ending condition [Skipped - Previous Error]

Write Run Scenario With Not Implemented Step

Given the following method

using System;
using xBDD.Test;
namespace xBDD.Reporting.Test.Features.WriteResults.WriteToTextScenarios
{
    public class RunScenarioWithNotImplementedStep : IExecute<string>
    {
        public string Execute()
        {
            var xBDD = new xBDDMock();
            xBDD.CurrentRun.TestRun.Name = "My Test Run";
            try
            {
                xBDD.CurrentRun
                    .AddScenario("My Scenario", "My Feature", "My.Area.Path")
                    .Given(xBDD.CreateStep("my starting condition"))
                    .When(xBDD.CreateStep("my action", (s) => { throw new NotImplementedException(); }))
                    .Then(xBDD.CreateStep("my ending condition"))
                    .Run();
            }
            catch { }
            return xBDD.CurrentRun.TestRun.WriteToText();
        }
    }
}

When the method is executed

Then the test results written should match the template:

My Test Run

My.Area.Path
	My Feature
		My Scenario [Failed - Step Not Implemented]
			Given my starting condition
			When my action [Failed - Not Implemented]
			Then my ending condition [Skipped - Previous Error]

Write Run Scenario With Skipped Step

Given the following method

using xBDD.Test;
namespace xBDD.Reporting.Test.Features.WriteResults.WriteToTextScenarios
{
    public class RunScenarioWithSkippedStep : IExecute<string>
    {
        public string Execute()
        {
            var xBDD = new xBDDMock();
            xBDD.CurrentRun.TestRun.Name = "My Test Run";
            try
            {
                xBDD.CurrentRun
                    .AddScenario("My Scenario", "My Feature", "My.Area.Path")
                    .Given(xBDD.CreateStep("my starting condition"))
                    .When(xBDD.CreateStep("my action", (s) => { throw new SkipStepException("Deferred"); }))
                    .Then(xBDD.CreateStep("my ending condition"))
                    .Run();
            }
            catch { }
            return xBDD.CurrentRun.TestRun.WriteToText();
        }
    }
}

When the method is executed

Then the test results written should match the template:

My Test Run

My.Area.Path
	My Feature
		My Scenario [Failed - Step Skipped]
			Given my starting condition
			When my action [Skipped - Deferred]
			Then my ending condition [Skipped - Previous Error]

Write Run Scenario With Step With Multiline Parameter

Given the following method

using xBDD.Test;
namespace xBDD.Reporting.Test.Features.WriteResults.WriteToTextScenarios
{
    public class RunScenarioWithStepWithMultilineParameter : IExecute<string>
    {
        public string Execute()
        {
            var xBDD = new xBDDMock();
            xBDD.CurrentRun.TestRun.Name = "My Test Run";
            xBDD.CurrentRun
                .AddScenario("My Scenario", "My Feature", "My.Area.Path")
                .Given(xBDD.CreateStep("my starting condition with the following", (s) => { }, "My\r\nmultiline\r\nparameter"))
                .When(xBDD.CreateStep("my action"))
                .Then(xBDD.CreateStep("my ending condition"))
                .Run();
            return xBDD.CurrentRun.TestRun.WriteToText();
        }
    }
}

When the method is executed

Then the test results written should match the template:

My Test Run

My.Area.Path
	My Feature
		My Scenario
			Given my starting condition with the following
				My
				multiline
				parameter
			When my action
			Then my ending condition

Write Run Scenario With Steps

Given the following method

using xBDD.Test;
namespace xBDD.Reporting.Test.Features.WriteResults.WriteToTextScenarios
{
    public class RunScenarioWithSteps : IExecute<string>
    {
        public string Execute()
        {
            var xBDD = new xBDDMock();
            xBDD.CurrentRun.TestRun.Name = "My Test Run";
            try
            {
                xBDD.CurrentRun
                    .AddScenario("My Scenario", "My Feature", "My.Area.Path")
                    .Given(xBDD.CreateStep("my starting condition"))
                    .When(xBDD.CreateStep("my action"))
                    .Then(xBDD.CreateStep("my ending condition"))
                    .Run();
            }
            catch { }
            return xBDD.CurrentRun.TestRun.WriteToText();
        }
    }
}

When the method is executed

Then the test results written should match the template:

My Test Run

My.Area.Path
	My Feature
		My Scenario
			Given my starting condition
			When my action
			Then my ending condition

Write Skipped Empty Scenario

Given the following method

using xBDD.Test;
namespace xBDD.Reporting.Test.Features.WriteResults.WriteToTextScenarios
{
    public class SkippedEmptyScenario : IExecute<string>
    {
        public string Execute()
        {
            var xBDD = new xBDDMock();
            xBDD.CurrentRun.TestRun.Name = "My Test Run";
            try
            {
                xBDD.CurrentRun
                    .AddScenario("My Scenario", "My Feature", "My.Area.Path")
                    .Skip("Deferred");
            }
            catch { }
            return xBDD.CurrentRun.TestRun.WriteToText();
        }
    }
}

When the method is executed

Then the test results written should match the template:

My Test Run

My.Area.Path
	My Feature
		My Scenario [Skipped - Deferred]

Write Skipped Scenario With Steps

Given the following method

using xBDD.Test;
namespace xBDD.Reporting.Test.Features.WriteResults.WriteToTextScenarios
{
    public class SkippedScenarioWithSteps : IExecute<string>
    {
        public string Execute()
        {
            var xBDD = new xBDDMock();
            xBDD.CurrentRun.TestRun.Name = "My Test Run";
            try
            {
                xBDD.CurrentRun
                    .AddScenario("My Scenario", "My Feature", "My.Area.Path")
                    .Given(xBDD.CreateStep("my starting condition"))
                    .When(xBDD.CreateStep("my action"))
                    .Then(xBDD.CreateStep("my ending condition"))
                    .Skip("Deferred");
            }
            catch { }
            return xBDD.CurrentRun.TestRun.WriteToText();
        }
    }
}

When the method is executed

Then the test results written should match the template:

My Test Run

My.Area.Path
	My Feature
		My Scenario [Skipped - Deferred]
			Given my starting condition
			When my action
			Then my ending condition

xBDD.Reporting.Test 2015-10-07T21:50:01

ViewHtmlReport

Write To Html

When the code calls 'xBDD.CurrentRun.WriteToHTML()

Then the code should return a string value of the html report

ViewHtmlReport CollapsingAndExpanding

Collapse And Expand Area Description

Collapse And Expand Areas

Given the test results of a single skipped scenario

And the user views the html report [Output]

Output

And the user expands the first area [Output]

Output

When the user cliks the first area again

Then the report should collapse the features listed under the area [Output]

Output

Given the test results of a single skipped scenario

And the user views the html report [Output]

Output

When the user clicks the first area

Then the report should expand the features listed under the area [Output]

Output

Given the test results of a passing full test run

And the user views the html report [Output]

Output

When the user clicks the expand all areas menu option

Then the report should expand the features listed under the area [Output]

Output

Collapse And Expand Exception

Collapse And Expand Output

ViewHtmlReport ViewResults

View Area

Given the test results of a single passing scenario

When the user views the html report [Output]

Output

Then the report will show the area name in green to indicate all features passed

And the features under the area will be collapsed because it passed

View Area Stats

Given the test results of a full test run with all outcomes

When the user views the html report [Output]

Output

Then there should be a green, yellow, and red bar for the passing, skipped, and failing features under the area name [Output]

Output

And the passing, green bar should have a width of 33%

And the skipped, yellow bar should have a width of 33%

And the failed, red bar should have a width of 33%

And the total number of areas should show to the left of the outcome bar with a value of 3

And the number of passed features should show to the left of the outcome bar with a value of 1

And the number of skipped features should show to the left of the outcome bar with a value of 1

And the number of failed features should show to the left of the outcome bar with a value of 1

Given the test results of a full test run with all outcomes

When the user views the html report [Output]

Output

Then there should be a green, yellow, and red bar for the passing, skipped, and failing scenarios under the area name [Output]

Output

And the passing, green bar should have a width of 56%

And the skipped, yellow bar should have a width of 33%

And the failed, red bar should have a width of 11%

And the total number of scenarios should show to the left of the outcome bar with a value of 9

And the number of passed scenarios should show to the left of the outcome bar with a value of 5

And the number of skipped scenarios should show to the left of the outcome bar with a value of 3

And the number of failed scenarios should show to the left of the outcome bar with a value of 1

Given the test results of a full test run with all outcomes

When the user views the html report [Output]

Output

Then there should be a green, yellow, and red bar for the passing, skipped, and failing steps under the area name [Output]

Output

And the passing, green bar should have a width of 59%

And the skipped, yellow bar should have a width of 37%

And the failed, red bar should have a width of 4%

And the total number of steps should show to the left of the outcome bar with a value of 27

And the number of passed steps should show to the left of the outcome bar with a value of 16

And the number of skipped steps should show to the left of the outcome bar with a value of 10

And the number of failed steps should show to the left of the outcome bar with a value of 1

View Failure Only

View Feature

Given the test results of a passing full test run

When the user views the html report [Output]

Output

And the user expands the first area